/* ============================================================
   ROAD DAWG — design system · tokens (web)
   Architecture: 3 tiers.
     TIER 1 · PRIMITIVES  raw values (ramps, gradients, type, space)
     TIER 2 · SEMANTIC    roles (surface, text, border, status)
     TIER 3 · COMPONENT   per-component contracts (btn, card, …)
   Components live in components.css.

   SOURCES — every value traceable to Figma "Road Dawg Mobile App":
     tokens node 2-23 · Colors + gradients node 3731-7812 ·
     Buttons node 3731-8210 · Typography node 3731-7720.
   Spacing + motion primitives are WEB EXTENSIONS (no Figma
   equivalents) and are marked as such. Do not hand-tune Figma
   values here; change them in Figma and re-pull.

   USAGE — load this file before components.css and the page styles.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TIER 1 · PRIMITIVES
   ════════════════════════════════════════════════════════════ */
:root{
  /* ---- Color ramps (Figma Colors frame) ---- */
  --purple-900:#271531;--purple-800:#341545;--purple-700:#422259;--purple-600:#512770;--purple-500:#602C87;--purple-400:#864FAD;--purple-300:#AC72D4;--purple-200:#D497FC;--purple-100:#DFB1FD;
  --sky-900:#00395D;--sky-800:#0E496C;--sky-700:#1B5779;--sky-600:#367597;--sky-500:#5093B3;--sky-400:#6BB1D1;--sky-300:#86CFED;--sky-200:#ABDEF3;--sky-100:#C3E7F6;
  --pink-900:#750029;--pink-800:#8E0E37;--pink-700:#AC1F49;--pink-600:#CA305A;--pink-500:#EF456F;--pink-400:#F26A8C;--pink-300:#F58FA9;--pink-200:#F9B5C5;--pink-100:#FCDAE2;
  --coral-900:#3E0000;--coral-800:#4C0A0A;--coral-700:#611A19;--coral-600:#732725;--coral-500:#95403E;--coral-400:#B95A57;--coral-300:#ED817C;--coral-200:#F19A96;--coral-100:#F7C6C4;
  --alabaster-900:#51463D;--alabaster-800:#61574D;--alabaster-700:#72675E;--alabaster-600:#82786E;--alabaster-500:#93897E;--alabaster-400:#ABA297;--alabaster-300:#C3BBAE;--alabaster-200:#E4DCCF;--alabaster-100:#F4EDDF;
  --lavender-900:#363158;--lavender-800:#443E6C;--lavender-700:#5D5585;--lavender-600:#6F6597;--lavender-500:#8177AB;--lavender-400:#9A8EC4;--lavender-300:#B8B0D6;--lavender-200:#D7D2E7;--lavender-100:#EBE8F3;
  --neutral-900:#181523;--neutral-800:#221F2E;--neutral-700:#353242;--neutral-600:#494655;--neutral-500:#6D6A78;--neutral-400:#C7C5CD;--neutral-300:#E3E2E6;--neutral-200:#F1F1F2;--neutral-100:#FFFFFF;
  --neutral-white:#FFFFFF;

  /* ---- Gradients (saved styles, Colors frame) ---- */
  --grad-sunset:linear-gradient(0deg, #5D73A9 7.9%, #C196C5 44.2%, #C692B8 48.3%, #DF8283 66.4%, #E97D6F 75.5%, #EB686F 85.6%, #EF456F 99.8%);
  --grad-midnight:linear-gradient(256.7deg, #002670 31.5%, #230433 100%);
  --grad-dawn:linear-gradient(259.1deg, #C0D1FF 21.6%, #AF74D0 77.4%, #F98D6B 128.4%);
  --grad-dusk:linear-gradient(167.2deg, #23192B 0%, #31284B 52.4%, #3A2C60 66.7%, #5C3360 97.6%);
  --grad-chip:linear-gradient(241.4deg, #104190 69.4%, #642E84 89.7%);
  /* component gradients (from the UI Kit components themselves) */
  --grad-match:linear-gradient(80deg, #10B981 9.73%, #11986B 45.58%, #127755 92.36%);   /* MatchChips 7801-36715 */
  --grad-max:linear-gradient(135deg, #6E85DE 32.1%, #D799F8 83.4%);                     /* Max avatar */

  /* ---- Type (Figma Typography frame) ---- */
  --font-heading:'Mitr',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,sans-serif;
  --fs-h1:48px;  --lh-h1:52px;
  --fs-h2:40px;  --lh-h2:44px;
  --fs-h3:32px;  --lh-h3:36px;
  --fs-h4:28px;  --lh-h4:30px;
  --fs-h5:24px;  --lh-h5:28px;
  --fs-h6:20px;  --lh-h6:24px;
  --fs-body-lg:20px;  --lh-body-lg:24px;
  --fs-body-md:16px;  --lh-body-md:24px;
  --fs-body-sm:14px;  --lh-body-sm:20px;
  --fs-body-xsm:13px; --lh-body-xsm:20px;
  /* weights in the kit: heading light 300 / regular 400 / medium 500 / bold 700;
     body light 300 / regular 400 / medium 500 / bold 700 (+ link) */

  /* ---- Radius + borders (Figma) ---- */
  --r-none:0px; --r-sm:16px; --r-md:24px; --r-lg:30px; --r-round:100px;
  --bw-sm:1px; --bw-md:2px;

  /* ---- Spacing scale · WEB EXTENSION (no Figma spacing tokens) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --maxw:1060px;

  /* ---- Motion · WEB EXTENSION ---- */
  --duration-fast:150ms; --duration-base:300ms; --duration-slow:600ms;
  --easing-out:cubic-bezier(0.22,0.61,0.36,1);
  --easing-spring:cubic-bezier(0.34,1.56,0.64,1);
}

/* ════════════════════════════════════════════════════════════
   TIER 2 · SEMANTIC — roles. Figma's own semantic names kept
   verbatim; --color-* role aliases layered on top.
   ════════════════════════════════════════════════════════════ */
:root{
  /* ---- Surfaces (Figma) ---- */
  --surface-card-large:#181523;
  --surface-card-small:#181523;
  --surface-bottom-sheet:#221f2e;
  --surface-card-secondary:#86cfed26;
  --surface-card-button2:#42225973;
  --surface-button-primary:#f4eddf;
  --surface-button-primary-pressed:#c3bbae;
  --surface-button-primary-disabled:#c7c5cd;
  --surface-button-secondary:#181523;
  --surface-button-secondary-pressed:#221f2e;
  --surface-button-light:#18152373;
  --surface-successful:#7cd9ba1a;
  --surface-destructive:#ed817c1a;

  /* ---- Text (Figma) ---- */
  --text-headings:#ffffff;
  --text-body:#f1f1f2;
  --text-inactive:#6d6a78;   /* inactive UI only; fails AA as body copy */
  --text-disabled:#494655;
  --text-active:#86cfed;
  --text-success:#10b981;
  --text-error:#f7c6c4;
  --text-on-button:#341545;
  --text-on-button-secondary:#ffffff;

  /* ---- Borders (Figma) ---- */
  --border-primary:#c7c5cd;
  --border-secondary:#86cfed;
  --border-active:#ffffff;
  --border-disabled:#353242;
  --border-hover:#6d6a78;
  --border-success:#10b981;
  --border-warning:#d9a93a;
  --border-destructive:#ed817c;

  /* ---- Status (Figma) ---- */
  --success:#10b981; --success-300:#7cd9ba; --success-900:#13352a;
  --warning-900:#3b321c; --icons-warning:#d9a93a;
  --icons-selected:#d497fc; --icons-success:#10b981;

  /* ---- Legacy aliases (V1/V2 pages use these ramp names) ---- */
  --primary-900:var(--purple-900); --primary-800:var(--purple-800); --primary-700:var(--purple-700);
  --primary-700-45:#42225973; --primary-600:var(--purple-600); --primary-500:var(--purple-500);
  --primary-400:var(--purple-400); --primary-100:var(--purple-100);
  --accent-900:var(--lavender-900); --accent-700:var(--lavender-700); --accent-600:var(--lavender-600);
  --accent-300:var(--lavender-300); --accent-200:var(--lavender-200); --accent-100:var(--lavender-100);
  --secondary-300:var(--sky-300); --secondary-500:var(--sky-500);

  /* ---- Role aliases (preferred names going forward) ---- */
  --color-bg-canvas:var(--neutral-900);
  --color-surface-raised:var(--neutral-800);
  --color-border-subtle:var(--neutral-700);
  --color-text-primary:var(--text-body);
  --color-text-muted:var(--lavender-300);    /* 8.7:1 on canvas · 7.8:1 on raised */
  --color-text-soft:var(--lavender-200);
  --color-link:var(--text-active);           /* 10.4:1 on canvas */
  --color-focus-ring:var(--border-active);
}

/* ════════════════════════════════════════════════════════════
   TIER 3 · COMPONENT — contracts consumed by components.css
   ════════════════════════════════════════════════════════════ */
:root{
  --btn-bg:var(--surface-button-primary);
  --btn-text:var(--text-on-button);
  --btn-bg-hover:var(--alabaster-200);          /* web: one step down the ramp */
  --btn-bg-pressed:var(--surface-button-primary-pressed);
  --btn-bg-disabled:var(--surface-button-primary-disabled);
  --btn-text-disabled:var(--text-disabled);
  --btn-destructive-bg:var(--surface-destructive);
  --btn-destructive-border:var(--border-destructive);
  --btn-destructive-text:var(--text-error);

  --btn2-bg:var(--surface-button-secondary);
  --btn2-text:var(--text-on-button-secondary);
  --btn2-bg-pressed:var(--surface-button-secondary-pressed);
  --btn2-border:var(--border-active);
  --btn2-bg-hover:var(--purple-700);             /* web: deep purple fill on hover */
  --btn2-bg-active:var(--purple-800);            /* web press after a hover */

  --card-bg:var(--color-surface-raised);
  --card-border:var(--color-border-subtle);
  --card-radius:var(--r-md);
}

/* ════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--color-bg-canvas);color:var(--color-text-primary);
  font-family:var(--font-body);font-size:var(--fs-body-md);line-height:var(--lh-body-md);
  font-weight:400;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
h1,h2,h3{font-family:var(--font-heading);font-weight:500;color:var(--text-headings);margin:0;}
h1{font-size:clamp(32px,6vw,var(--fs-h1));line-height:1.16;}
h2{font-size:clamp(26px,4vw,var(--fs-h2));line-height:1.15;}
h3{font-size:var(--fs-h6);line-height:var(--lh-h6);}
p{margin:0;}
a{color:var(--color-link);}
a:not(.btn):not(.btn-secondary):hover{color:var(--sky-100);}

/* ---- Accessibility base ---- */
:focus-visible{outline:var(--bw-md) solid var(--color-focus-ring);outline-offset:3px;border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ---- Motion keyframes (one accent animation per view) ---- */
@keyframes sun-drift{0%,100%{background-position:50% 100%,30% 82%;}50%{background-position:50% 88%,70% 68%;}}
@keyframes sun-glow{0%,100%{opacity:0.5;}50%{opacity:0.9;}}
@keyframes paw-pop{0%{transform:scale(0);opacity:0;}60%{transform:scale(1.25);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes lbl-rise{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:translateY(0);}}