/* ============================================================
   COLORS — Renault
   High-contrast two-tone canvas + single Sunlight Yellow accent.
   Base values first, then semantic aliases.
   ============================================================ */

:root {
  /* ---- Brand & Accent ---- */
  --color-primary: #ffed00;          /* Sunlight Yellow — primary CTAs, NEW badges */
  --color-primary-deep: #e6d200;     /* pressed/active yellow */
  --color-on-primary: #000000;       /* label on yellow — ALWAYS black, never white */

  /* ---- Surface ---- */
  --color-canvas: #ffffff;           /* default page + card surface (white catalogue mode) */
  --color-surface-soft: #f7f7f7;     /* subtle elevation step, inactive fields */
  --color-surface-dark: #000000;     /* alternate canvas (black storytelling mode) */
  --color-surface-deep: #111111;     /* inset cards/panels inside dark regions */
  --color-hairline: #f2f2f2;         /* soft 1px row divider on white */
  --color-hairline-strong: #000000;  /* full-strength dividers + all outlines */
  --color-divider-dark: rgba(255, 255, 255, 0.16); /* low-contrast divider on dark */

  /* ---- Text ---- */
  --color-ink: #000000;              /* primary text on white; also logos/icons/borders */
  --color-body: #222222;             /* long-form body where pure black is too heavy */
  --color-charcoal: #333333;         /* captions, metadata, small labels */
  --color-mute: #666666;             /* supporting text, inactive nav */
  --color-ash: #8a8a8a;              /* placeholder text, disabled labels */
  --color-stone: #c4c4c4;            /* disabled-state foreground */
  --color-on-dark: #ffffff;          /* primary text on dark surfaces */
  --color-on-dark-mute: rgba(255, 255, 255, 0.72); /* secondary text on dark */

  /* ---- Semantic (functional, never decorative) ---- */
  --color-error: #be6464;            /* muted warm red — inline form errors */
  --color-warning: #f0ad4e;          /* amber alert */
  --color-success: #8dc572;          /* muted green confirmation */
  --color-info: #337ab7;             /* desaturated mid-blue — info chips */
  --color-link: #0000ee;             /* fallback anchor default; production links inherit ink */

  /* ---- Atmospheric (reserved: R5 / E-TECH hero contexts ONLY) ---- */
  --gradient-r5: radial-gradient(120% 120% at 30% 20%, #8a2be2 0%, #ff3da6 45%, #ffed00 100%); /* @kind color */
  --gradient-etech: linear-gradient(135deg, #ff00aa 0%, #6a00ff 100%); /* @kind color */
}