/**
 * Taxi Lille Connect — Design tokens.
 * Single source of truth for color, type, spacing, radius, shadow, motion.
 * Consumed by every other stylesheet. Never hard-code these values elsewhere.
 */

:root {
  /* ---------- Color ---------- */
  --tlc-color-midnight: #07111F;
  --tlc-color-navy: #0B1726;
  --tlc-color-ink: #050A10;
  --tlc-color-ivory: #F6F2EA;
  --tlc-color-paper: #FBFAF7;
  --tlc-color-gold: #C6A15B;
  --tlc-color-gold-muted: #A98649;
  --tlc-color-slate: #747C85;
  --tlc-color-white: #FFFFFF;

  /* Derived roles */
  --tlc-color-text: #1C2530;            /* body text on light surfaces */
  --tlc-color-text-soft: #46505C;       /* secondary text on light surfaces */
  --tlc-color-text-inverse: #EFEAE0;    /* body text on dark surfaces */
  --tlc-color-text-inverse-soft: rgba(239, 234, 224, 0.72);
  /* Gold set as *text* on a light surface: --tlc-color-gold-muted tops out at
     3.0:1 on ivory, so body-size gold copy uses this darker role instead
     (5.5:1 on paper, 5.1:1 on ivory). Gold-muted stays the icon/hairline gold,
     where 3:1 is the bar; raw --tlc-color-gold stays the text gold on the dark
     surfaces, where it already measures 7.8:1. */
  --tlc-color-gold-text: #7F6230;
  /* Captions and form hints render at 13px, so this role has to clear 4.5:1
     on its own: the former #747C85 only reached 4.05:1 on paper. */
  --tlc-color-muted: #666E77;
  --tlc-color-line-light: rgba(11, 23, 38, 0.12);   /* hairlines on light */
  --tlc-color-line-dark: rgba(246, 242, 234, 0.14); /* hairlines on dark */
  --tlc-color-gold-line: rgba(198, 161, 91, 0.45);
  /* Gold is a 2.4:1 hairline on paper, so the ring role is the darkened gold
     (4.8:1 on paper, 5.0:1 on white). The dark surfaces re-point it in
     base.css, where raw gold already clears 3:1 comfortably. */
  --tlc-color-focus: #8A6B33;
  --tlc-color-success: #2E7D52;
  --tlc-color-error: #B3392E;

  /* ---------- Typography ---------- */
  --tlc-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --tlc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --tlc-text-display: clamp(2.75rem, 1.4rem + 5.2vw, 4.75rem);
  --tlc-text-h1: clamp(2.5rem, 1.3rem + 4.6vw, 4.25rem);
  --tlc-text-h2: clamp(1.9rem, 1.25rem + 2.4vw, 3rem);
  --tlc-text-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  --tlc-text-h4: 1.125rem;
  --tlc-text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --tlc-text-body: 1rem;
  --tlc-text-small: 0.875rem;
  --tlc-text-xs: 0.8125rem;
  --tlc-text-eyebrow: 0.78rem;
  --tlc-text-button: 0.8125rem;

  --tlc-leading-tight: 1.08;
  --tlc-leading-heading: 1.15;
  --tlc-leading-body: 1.65;

  --tlc-tracking-wide: 0.16em;
  --tlc-tracking-wider: 0.22em;

  /* ---------- Spacing ---------- */
  --tlc-space-xs: 0.5rem;
  --tlc-space-sm: 1rem;
  --tlc-space-md: 1.5rem;
  --tlc-space-lg: 2.5rem;
  --tlc-space-xl: 4rem;
  --tlc-space-2xl: clamp(4.5rem, 3rem + 6vw, 7.5rem);

  /* Vertical rhythm of page sections */
  --tlc-section-pad: clamp(4rem, 2.5rem + 5vw, 6.75rem);
  --tlc-section-pad-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* ---------- Layout ---------- */
  --tlc-container: 1200px;
  --tlc-container-wide: 1360px;
  --tlc-container-narrow: 780px;
  --tlc-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --tlc-header-height: 76px;
  --tlc-actionbar-height: 53px;

  /* ---------- Shape & elevation ---------- */
  --tlc-radius-sm: 4px;
  --tlc-radius-md: 10px;
  --tlc-shadow-soft: 0 18px 45px -18px rgba(5, 10, 16, 0.35);
  --tlc-shadow-card: 0 10px 30px -12px rgba(5, 10, 16, 0.22);

  /* ---------- Motion ---------- */
  --tlc-transition: 0.25s cubic-bezier(0.33, 1, 0.68, 1);
  /* Exposed on its own because the FAQ panel has to delay a discrete
     visibility flip until the height animation has finished. */
  --tlc-duration-slow: 0.45s;
  --tlc-transition-slow: var(--tlc-duration-slow) cubic-bezier(0.33, 1, 0.68, 1);
}