/* ============================================================
   sellyourcar — Design Tokens
   The single source of truth. Every component reads from here.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --ink:        #16181D;  /* primary surface / text */
  --green:      #12C66B;  /* deal green — CTA + brand accent */
  --sand:       #F2EEE3;  /* warm neutral background */
  --paper:      #FFFFFF;  /* clean surface */

  /* ---- Ink scale (cool-neutral darks) ---- */
  --ink-900: #16181D;
  --ink-800: #1F222A;
  --ink-700: #2A2E38;
  --ink-600: #3A3F4B;

  /* ---- Gray scale (warm-leaning neutrals) ---- */
  --gray-600: #6B6C72;  /* muted body text on light */
  --gray-500: #9A9CA3;  /* subtle / captions */
  --gray-400: #C2C3C8;  /* disabled text, dividers on dark */
  --gray-300: #D9D9D2;  /* hairline borders */
  --gray-200: #E7E5DD;  /* soft borders on sand */
  --gray-100: #F4F2EC;  /* faint fills */

  /* ---- Green family ---- */
  --green-600: #0E9E54;  /* hover / pressed */
  --green-700: #0B7E43;  /* text-on-light green */
  --green-ink: #0B2C1A;  /* deep green for text on green fills */
  --green-100: #E4F8EE;  /* tint wash (success bg) */
  --green-200: #C4EFD8;  /* tint border */
  --green-glow: rgba(18, 198, 107, 0.34);

  /* ---- Semantic (harmonised to brand L/C in oklch) ---- */
  --danger:      #E0413E;  /* errors, price drops, removed */
  --danger-100:  #FCE9E8;
  --danger-700:  #B22B29;
  --warning:     #E8A33D;  /* reserved, pending */
  --warning-100: #FBF0DC;
  --warning-700: #9E6A18;
  --info:        #2C7FD6;  /* neutral notice */
  --info-100:    #E5F0FB;

  /* ---- Semantic surface roles ---- */
  --bg:            var(--sand);
  --surface:       var(--paper);
  --surface-ink:   var(--ink-900);
  --text:          var(--ink-900);
  --text-muted:    var(--gray-600);
  --text-subtle:   var(--gray-500);
  --text-on-ink:   #FFFFFF;
  --border:        var(--gray-300);
  --border-soft:   var(--gray-200);
  --border-on-ink: rgba(255,255,255,0.10);

  /* ---- Typography ---- */
  --font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  --fs-display: 56px;
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body-l:  18px;
  --fs-body:    16px;
  --fs-body-s:  14px;
  --fs-caption: 13px;
  --fs-micro:   12px;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;

  --ls-tight:  -0.5px;
  --ls-tighter: -1px;
  --ls-wide:    1.5px;

  /* ---- Spacing (4px base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --sp-18: 72px;

  /* ---- Radius ---- */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---- Elevation ---- */
  --e-0: none;
  --e-1: 0 1px 2px rgba(22,24,29,0.06), 0 1px 3px rgba(22,24,29,0.05);
  --e-2: 0 4px 16px rgba(22,24,29,0.08), 0 1px 3px rgba(22,24,29,0.05);
  --e-3: 0 14px 38px rgba(22,24,29,0.14), 0 3px 8px rgba(22,24,29,0.06);
  --e-cta: 0 6px 20px var(--green-glow);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}