/* * TIMF Design System — Single source of truth for visual tokens. * * gstack-design-review 2026-05-08 audit fix : avant ce fichier, 49 hex * uniques étaient hard-codés dans 5 pages — fragmentation chromatique * (3 navys, 2 golds, 3 borders). Ce fichier consolide en 9 tokens. * * Usage : au début du * de chaque page, AVANT les styles inline. Les tokens sont * disponibles globalement via les variables CSS custom. * * Mode : light only (le brand TIMF est intentionnellement clair pour * matcher l'imagerie travel/sunset). Pas de dark mode prévu. */ :root { /* ─── Couleurs primaires ──────────────────────────────────────────── */ --timf-navy-900: #0a0f1e; /* hero bg, footer, primary text inverse */ --timf-navy-700: #1e293b; /* secondary bg sections */ --timf-navy-500: #475569; /* muted text, captions */ --timf-navy-300: #94a3b8; /* disabled, placeholder text */ --timf-navy-100: #e2e8f0; /* dividers, subtle borders */ --timf-gold-700: #a16207; /* primary CTA solid bg */ --timf-gold-500: #c9a961; /* accent badges, highlights */ --timf-gold-100: #fef3c7; /* gold-tinted backgrounds */ --timf-white: #ffffff; --timf-cream: #fafaf9; /* page bg subtle off-white */ --timf-paper: #f5f5f4; /* card bg */ /* ─── Sémantique (success / warning / danger) ───────────────────── */ --timf-success-700: #166534; /* success text */ --timf-success-100: #dcfce7; /* success bg tint */ --timf-warning-700: #78350f; /* warning text (amber dark) */ --timf-warning-100: #fef3c7; /* warning bg tint (= gold-100) */ --timf-danger-700: #991b1b; /* error text */ --timf-danger-100: #fee2e2; /* error bg tint */ /* ─── Typographie : 6 tiers + 3 weights ─────────────────────────── */ --timf-font-head: 'Cormorant Garamond', Georgia, serif; --timf-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --timf-text-xs: 0.75rem; /* 12px : footnotes, meta */ --timf-text-sm: 0.875rem; /* 14px : captions */ --timf-text-base: 1rem; /* 16px : body — anti-iOS-zoom */ --timf-text-lg: 1.25rem; /* 20px : leads */ --timf-text-xl: 1.875rem; /* 30px : section h2 */ --timf-text-2xl: 3rem; /* 48px : hero h1 */ --timf-weight-regular: 400; --timf-weight-medium: 500; --timf-weight-bold: 700; /* ─── Spacing : 8-grid ────────────────────────────────────────────── */ --timf-space-1: 0.25rem; /* 4px */ --timf-space-2: 0.5rem; /* 8px */ --timf-space-3: 1rem; /* 16px */ --timf-space-4: 1.5rem; /* 24px */ --timf-space-5: 2rem; /* 32px */ --timf-space-6: 3rem; /* 48px */ --timf-space-7: 4rem; /* 64px */ /* ─── Border radius : 3 tiers seulement ─────────────────────────── */ --timf-radius-sm: 6px; /* inputs, small buttons */ --timf-radius-md: 12px; /* cards, sections */ --timf-radius-pill: 999px; /* badges, pill buttons */ /* ─── Shadow : 3 elevation tiers ─────────────────────────────────── */ --timf-shadow-sm: 0 1px 2px rgba(10, 15, 30, 0.05); --timf-shadow-md: 0 4px 12px rgba(10, 15, 30, 0.08); --timf-shadow-lg: 0 12px 32px rgba(10, 15, 30, 0.16); /* ─── Tap targets mobile (WCAG 2.5.5 Target Size AA) ────────────── */ --timf-tap-min: 44px; } /* ─── Mobile-first base : reset + tap targets ─────────────────────── */ @media (max-width: 640px) { /* Anti-iOS zoom : font-size minimum 16px sur les inputs */ input, select, textarea, button { font-size: 16px !important; } /* Tap target enforcement WCAG AA */ button, [role="button"], a.btn, input[type="submit"], input[type="checkbox"], input[type="radio"] { min-height: var(--timf-tap-min); min-width: var(--timf-tap-min); } } /* ─── Reduced motion (WCAG 2.3.3) — applied globally ──────────────── */ @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; } }