/* ═══════════════════════════════════════════════════════════════════════════ CaleDoHub — Design Tokens v1.0 ─────────────────────────────────────────────────────────────────────────── Fichier CSS centralisé : couleurs, espacement, typo, ombres, transitions. USAGE : - Charger dans le de chaque page : - Utiliser les variables : color: var(--color-primary); AVANTAGES : - 1 seul endroit pour ajuster la palette - Support dark mode via prefers-color-scheme - Cohérence garantie sur les 10 sites À MIGRER PROGRESSIVEMENT : - Remplacer #FF6B35 → var(--color-primary) - Remplacer #1a2744 → var(--color-navy) - etc. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─── COULEURS PRIMAIRES (brand) ─────────────────────────────────── */ --color-primary: #FF6B35; /* Coral - actions principales */ --color-primary-hover: #ff8555; /* Coral hover */ --color-primary-dark: #e55320; /* Coral pressed */ --color-primary-light: #ffe5d8; /* Coral background subtle */ --color-navy: #1a2744; /* Navy - texte principal, headers */ --color-navy-soft: #2c3957; /* Navy variation */ --color-teal: #2EC4B6; /* Teal - succès, validations */ --color-teal-dark: #20a89c; --color-teal-light: #d1fae5; --color-gold: #FFD166; /* Gold - accents, étoiles, badges */ --color-gold-dark: #e6b94d; --color-gold-light: #fef3c7; /* ─── COULEURS NEUTRES ────────────────────────────────────────────── */ --color-text: #0f172a; /* Texte principal */ --color-text-muted: #64748b; /* Texte secondaire */ --color-text-light: #94a3b8; /* Texte tertiaire (placeholders) */ --color-text-inverse: #ffffff; /* Texte sur fond foncé */ --color-bg: #f8fafc; /* Background page */ --color-bg-alt: #f1f5f9; /* Background variation */ --color-card: #ffffff; /* Background cards */ --color-border: #e2e8f0; /* Bordures standard */ --color-border-light: #f1f5f9; /* Bordures subtiles */ /* ─── COULEURS SÉMANTIQUES ────────────────────────────────────────── */ --color-success: #10b981; --color-success-bg: #d1fae5; --color-warning: #f59e0b; --color-warning-bg: #fef3c7; --color-danger: #dc2626; --color-danger-bg: #fee2e2; --color-info: #3b82f6; --color-info-bg: #eff6ff; /* ─── ESPACEMENT (8px grid) ───────────────────────────────────────── */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* ─── BORDER RADIUS ───────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ─── OMBRES ──────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); --shadow-coral: 0 8px 30px rgba(255,107,53,.15); /* ─── TYPOGRAPHIE ─────────────────────────────────────────────────── */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Monaco, Consolas, "Courier New", monospace; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 26px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --line-height-loose: 1.8; /* ─── TRANSITIONS ─────────────────────────────────────────────────── */ --transition-fast: .1s cubic-bezier(.4,0,.2,1); --transition-base: .15s cubic-bezier(.4,0,.2,1); --transition-slow: .3s cubic-bezier(.4,0,.2,1); /* ─── Z-INDEX (échelle cohérente) ─────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-toast: 9999; --z-tooltip: 10000; /* ─── BREAKPOINTS (à utiliser dans @media) ────────────────────────── */ /* mobile: < 640px ; tablet: 640-1024px ; desktop: > 1024px ; */ /* Les vars CSS ne marchent pas dans @media — usage en référence */ /* ─── LEGACY (compat) ─────────────────────────────────────────────── */ /* Pour migration progressive depuis les anciennes vars locales : */ --coral: var(--color-primary); --navy: var(--color-navy); --teal: var(--color-teal); --gold: var(--color-gold); --bg: var(--color-bg); --card: var(--color-card); --text: var(--color-text); --muted: var(--color-text-muted); --border: var(--color-border); /* ─── BUNDLE COMPAT (--ch-*) ──────────────────────────────────────── */ /* Le bundle caledohub-firebase-init.js utilise ces vars en interne. */ /* On les expose au :root pour qu'elles puissent être surchargées */ /* depuis l'extérieur si besoin (theming, dark mode ajustements). */ --ch-coral: var(--color-primary); --ch-coral-dark: var(--color-primary-dark); --ch-navy: var(--color-navy); --ch-navy-2: #0f1830; --ch-teal: var(--color-teal); --ch-gold: var(--color-gold); --ch-text-muted: rgba(255,255,255,.72); --ch-bar-h: 44px; } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE (auto-detect via prefers-color-scheme) ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-light: #64748b; --color-bg: #0f172a; --color-bg-alt: #1e293b; --color-card: #1e293b; --color-border: #334155; --color-border-light: #475569; --color-navy: #f1f5f9; /* invert pour rester lisible */ /* Ajuster ombres pour dark mode */ --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5); --shadow-coral: 0 8px 30px rgba(255,107,53,.25); } } /* ═══════════════════════════════════════════════════════════════════════════ STYLES UTILITAIRES DE BASE (réutilisables partout) ─────────────────────────────────────────────────────────────────────────── */ /* A11y : focus visible cohérent */ *:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); } /* A11y : skip link (à ajouter dans body) */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-xs) var(--space-md); z-index: var(--z-tooltip); text-decoration: none; border-radius: 0 0 var(--radius-sm) 0; font-weight: var(--font-weight-semibold); } .skip-link:focus { top: 0; } /* Reduced motion = respecter les préférences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Sélection texte cohérente */ ::selection { background: var(--color-primary); color: var(--color-text-inverse); } /* Scrollbar custom (Webkit) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--color-bg-alt); } ::-webkit-scrollbar-thumb { background: var(--color-text-light); border-radius: var(--radius-sm); border: 3px solid var(--color-bg-alt); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }