:root {
  /* Design tokens — Figma file ECeNrsHyls8d8mr7EKWDYM. Colors/typography confirmed
     against the Sisley brand spec; sizes/states from Figma UI KIT metadata (node 328:2341).
     Figma MCP rate limit blocked get_variable_defs: semantic colors, hover shades
     and exact type tokens are inferred, not confirmed — flagged below. */

  /* Colors — core brand, confirmed */
  --color-bg: #1A1A1A;
  --color-surface: #353535;           /* = button base */
  --color-text: #FFFFFF;
  --color-text-muted: #8C8C8C;        /* secondary / disabled text */
  --color-accent: #FBD22D;            /* Sisley yellow: progress, active, highlight */
  --color-progress-track: #685711;    /* accent dimmed on black (Figma) */

  /* Colors — buttons */
  --color-button-bg: #353535;
  --color-button-text: #FFFFFF;
  --color-button-bg-hover: #4D4D4D;   /* inferred */
  --color-button-bg-active: #FBD22D;  /* Figma "Validated" state */
  --color-button-text-active: #1A1A1A;
  --color-button-bg-disabled: #EDEDED;
  --color-button-text-disabled: #8C8C8C;

  /* Colors — fields & borders */
  --color-field-bg: transparent;
  --color-field-text: #FFFFFF;
  /* Texte Default/Hover de `fields-text` (328:2533, Figma) : #707070, distinct
     de #8C8C8C (`--color-border`). */
  --color-field-placeholder: #707070;
  --color-border: #8C8C8C;            /* default field/selector border */
  --color-border-hover: #FFFFFF;
  /* Hover et Focus de `fields-text` (328:2533) partagent #EBDB9A — l'accent
     (#FBD22D) n'apparaît que sur l'état Validated. */
  --color-border-focus: #EBDB9A;
  /* Séparateur (écran résultat, SIPTECS-8636, Figma 800:3530/756:4013) : même hex que
     --color-button-bg-disabled par coïncidence — variable dédiée pour ne pas les coupler. */
  --color-divider: #EDEDED;

  /* Colors — semantic */
  --color-error: #E30000;             /* error / out-of-stock (Sisley red, spec) */
  /* Pastille Error de `fields-text` (328:2533) : #FF2121, distinct de
     --color-error — Figma utilise bien deux rouges ici. Pas branché sur la surcharge
     de thème back-office (`templates/base.html`), contrairement à --color-error. */
  --color-error-badge: #FF2121;

  /* Colors — overlays */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-oof: #8C8C8C;               /* out-of-stock dimming/label */

  /* Typography — Roboto */
  --font-family-base: 'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Type scale (px), derived from component heights — inferred */
  --text-xs: 12px;     /* legal / helper / progress labels */
  --text-sm: 14px;     /* links, button labels, field labels */
  --text-base: 16px;   /* body, field input text */
  --text-lg: 18px;     /* product tile title, lead paragraph */
  --text-xl: 24px;     /* section / question heading */
  --text-2xl: 32px;    /* sub headline */
  --text-3xl: 40px;    /* intro / hero headline */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --letter-spacing-wide: 0.02em;   /* uppercase CTA labels */

  /* Spacing (4px base scale) */
  --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;
  --space-20: 80px;

  /* Radii */
  --radius-button: 100px;   /* pill CTAs, confirmed */
  --radius-card: 5px;       /* product tiles / cards, confirmed */
  --radius-field: 100px;    /* fields-text (328:2533), confirmed */
  --radius-full: 9999px;
  /* Answer selector and progress bar are square-cornered (Figma UI KIT 328:2341),
     not every control is a pill — named to keep the divergence deliberate. */
  --radius-selector: 0;     /* answer selector = rectangle, confirmed */
  --radius-progress: 0;     /* progress bar = square edges, confirmed */

  /* Component sizes (Figma metadata) */
  --size-button-height: 48px;          /* primary_button */
  --size-button-min-width: 157px;
  --size-control-max: 345px;           /* shared max-width cap: CTAs/fields/tiles */
  --size-selector-height: 50px;        /* selector desktop & mobile */
  --size-selector-width-desktop: 194px;
  --size-selector-width-mobile: 181px;
  --size-purchase-height: 60px;        /* primary_purchase */
  --size-purchase-min-width: 232px;
  --size-field-height: 74px;           /* fields-text default */
  --size-field-height-error: 100px;    /* fields-text, error adds message */
  --size-field-width: 327px;
  --size-link-height: 24px;            /* link line-box */
  --size-tile-width: 338px;            /* product tile */
  /* Visuel produit : carré de 190, invariant. La bande qui le porte s'étire en
     largeur (338 UI KIT, 345 mobile, 366 sur l'écran résultat), toujours 190 de haut. */
  --size-tile-media: 190px;
  --size-tile-height: 304px;           /* product tile (DE locale: 360px) */
  --size-tile-height-de: 360px;
  --size-progressbar-height: 12px;     /* 8px track + 4px black band below */
  --size-progressbar-track: 8px;
  --size-progressbar-width-desktop: 960px;
  --size-progressbar-width-mobile: 375px;
  --progressbar-steps: 6;              /* steps 0–5 */

  /* Layout */
  --layout-col-split: 50%;             /* 2-col 50/50 desktop */
  --breakpoint-mobile: 768px;          /* below: col1 (media) hidden */
  --content-max-width: 576px;          /* centered column (Figma: 576 dans 960) */

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}