/* ============================================================ * Tokens Helaio — repris de la charte (docs/design/helaio-branding-complet, * tokens/colors.css, typography.css, spacing.css). Valeurs verrouillées : * ne pas « arrondir ». Thème clair uniquement (les sites clients n'ont pas * de mode sombre en étape 2). * ============================================================ */ :root { /* ---- Palette (neuf accents, contraste AA vérifié) ---- */ --palette-sage: #4a7c59; --palette-terracotta: #c75b39; --palette-navy: #3d5a73; --palette-stone: #6b6560; --palette-olive: #6b7a35; --palette-mint: #3e8a7a; --palette-cyan: #2a7a8a; --palette-cream: #b5956a; --palette-lavender: #b8a8d9; /* Accent actif : posé par [data-accent] sur (voir plus bas). * --accent sert aux fonds (boutons pleins) ; --accent-text à tout texte en accent * (sur-titres, liens, prix) : la même teinte assombrie jusqu'à 4,5:1 sur le fond le plus chaud. */ --accent: var(--palette-sage); --accent-text: #457353; --accent-contrast: #ffffff; /* ---- Surfaces et texte ---- */ --background: #fffefa; --surface: #f5f2ec; --surface-elevated: #ffffff; --text-primary: #2d2a26; --text-secondary: #6b6560; /* La charte donne #9c958e ; assombri jusqu'à 4,5:1 sur le fond le plus chaud (AA en petit texte). */ --text-tertiary: #6d6863; --border: #e5e0d8; /* ---- Statuts ---- */ --success: #3d7a4a; --warning: #c4882f; --error: #b54a3c; --info: #2563eb; /* ---- Polices (auto-hébergées, voir HOFonts.ts) ---- */ --font-display: 'Quicksand Variable', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; --font-body: 'Quicksand Variable', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; --font-mono: 'B612 Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Échelle typographique ---- */ --fs-sm: 12px; --fs-base: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-2xl: 20px; --fs-3xl: 22px; --fs-4xl: 28px; --fs-5xl: 34px; --lh-tight: 1.2; --lh-snug: 1.4; --lh-relaxed: 1.6; --ls-tight: -0.5px; --ls-wide: 0.5px; /* ---- Espacement (base 4) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Rayons ---- */ --radius-sm: 4px; --radius-md: 8px; /* boutons, champs */ --radius-lg: 12px; /* cartes */ --radius-xl: 16px; --radius-2xl: 24px; /* panneaux, images d'accueil */ --radius-full: 9999px; /* ---- Ombres ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.15); --glow-accent: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); /* ---- Traits ---- */ --border-hairline: 1px; --border-control: 1.5px; /* ---- Mouvement ---- */ --dur-fast: 0.15s; --dur-brisk: 0.25s; --ease-standard: cubic-bezier(0.32, 0.72, 0, 1); /* ---- Gabarit ---- */ --container-max: 1024px; --reading-max: 680px; } /* ---- Accent actif ---- */ [data-accent='sage'] { --accent: var(--palette-sage); --accent-text: #457353; } [data-accent='terracotta'] { --accent: var(--palette-terracotta); --accent-text: #a94d30; } [data-accent='navy'] { --accent: var(--palette-navy); --accent-text: #3d5a73; } [data-accent='stone'] { --accent: var(--palette-stone); --accent-text: #6b6560; } [data-accent='olive'] { --accent: var(--palette-olive); --accent-text: #616f30; } [data-accent='mint'] { --accent: var(--palette-mint); --accent-text: #347466; } [data-accent='cyan'] { --accent: var(--palette-cyan); --accent-text: #277180; } [data-accent='cream'] { --accent: var(--palette-cream); --accent-text: #7b6548; --accent-contrast: #2d2a26; } [data-accent='lavender'] { --accent: var(--palette-lavender); --accent-text: #6e6582; --accent-contrast: #2d2a26; } /* ---- Hébreu : Rubik porte l'hébreu et le latin, Quicksand n'a pas d'hébreu ---- */ :lang(he) { --font-display: 'Rubik Variable', system-ui, sans-serif; --font-body: 'Rubik Variable', system-ui, sans-serif; --font-mono: 'B612 Mono', 'Rubik Variable', ui-monospace, monospace; --ls-tight: 0; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.001s; --dur-brisk: 0.001s; } }