/* ============================================================
   One Way Call Taxi — Design Tokens (single source of truth)
   Brand palette derived from the client's own stylesheets:
   green #00653D/#0C6E44, teal-green #009688, taxi-yellow #F9BC07/#E4AC05
   Fonts: Lexend + Source Sans 3 (ui-ux-pro-max "Trust & Authority" pairing)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* ---- raw brand ---- */
  --green-900: #04160F;
  --green-800: #08201A;
  --green-700: #0C3325;
  --green-600: #00653D;   /* primary brand green */
  --green-500: #0C6E44;
  --teal-500:  #009688;   /* secondary */
  --teal-400:  #1FB3A3;
  --yellow-500:#F9BC07;   /* taxi accent */
  --yellow-600:#E4AC05;   /* button/pressed */
  --yellow-400:#FECB05;
  --paper:     #F6F4EC;
  --white:     #FFFFFF;

  /* ---- semantic tokens (LIGHT default) ---- */
  --bg:            #F4F2E9;
  --bg-2:          #ECEFE7;   /* green-biased neutral */
  --surface:       #FFFFFF;
  --surface-2:     #F3F1E8;
  --ink:           #10241B;   /* near-black, green bias */
  --ink-soft:      #46564D;
  --ink-faint:     #798A80;
  --border:        #E1E5DC;
  --border-strong: #CBD3C7;
  --brand:         #00653D;   /* primary action/structure */
  --brand-ink:     #FFFFFF;
  --accent:        #E4AC05;   /* CTA yellow that passes contrast on light */
  --accent-bright: #F9BC07;
  --accent-ink:    #06231A;
  --link:          #0C6E44;
  --pos:           #1E8A50;
  --warn:          #C77A0A;
  --neg:           #C6462F;
  --ring:          #F9BC07;   /* focus */

  /* ---- shadows / elevation ---- */
  --shadow-sm: 0 1px 2px rgba(8,32,26,.06), 0 2px 6px rgba(8,32,26,.05);
  --shadow-md: 0 2px 6px rgba(8,32,26,.07), 0 12px 28px rgba(8,32,26,.09);
  --shadow-lg: 0 8px 20px rgba(8,32,26,.10), 0 28px 60px rgba(8,32,26,.14);
  --shadow-brand: 0 10px 30px rgba(0,101,61,.28);

  /* ---- radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- type (ui-ux-pro-max recommendation for Trust & Authority: Lexend + Source Sans 3) ---- */
  --font-display: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* modular type scale (ui-ux-pro-max: consistent scale ~13/14/16/18/20/24/32/40/56) */
  --step--2: .8125rem;                                  /* 13 — micro labels */
  --step--1: .875rem;                                   /* 14 — small / captions */
  --step-0:  1rem;                                      /* 16 — body base */
  --step-1:  clamp(1.125rem, 1.05rem + .3vw, 1.25rem);  /* 18–20 — lede / card title */
  --step-2:  clamp(1.5rem, 1.25rem + 1vw, 2rem);        /* 24–32 — section H2 */
  --step-3:  clamp(2rem, 1.55rem + 1.8vw, 2.75rem);     /* 32–44 — big H2 */
  --step-4:  clamp(2.75rem, 2.1rem + 2.8vw, 3.75rem);   /* 44–60 — hero H1 */

  /* ---- layout ---- */
  --maxw: 1280px;
  --gutter: clamp(1.05rem, 4vw, 3rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);

  /* ---- motion (business-motive: quick, purposeful) ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #08201A;
    --bg-2:          #0B2A20;
    --surface:       #0E2A20;
    --surface-2:     #123227;
    --ink:           #EAF2EC;
    --ink-soft:      #A9BEB1;
    --ink-faint:     #6E8579;
    --border:        #1C3B2E;
    --border-strong: #2A4E3D;
    --brand:         #2FBF77;   /* brighter green on dark */
    --brand-ink:     #05201530;
    --accent:        #F9BC07;
    --accent-bright: #FECB05;
    --accent-ink:    #06231A;
    --link:          #4FD08A;
    --pos:           #46D08A;
    --warn:          #E8A93A;
    --neg:           #FF7E6E;
    --ring:          #FECB05;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 2px 8px rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 26px rgba(0,0,0,.45), 0 30px 64px rgba(0,0,0,.5);
    --shadow-brand: 0 10px 30px rgba(0,0,0,.5);
  }
}

/* explicit theme toggle overrides the media query in both directions */
:root[data-theme="light"] {
  --bg:#F4F2E9; --bg-2:#ECEFE7; --surface:#FFFFFF; --surface-2:#F3F1E8;
  --ink:#10241B; --ink-soft:#46564D; --ink-faint:#798A80; --border:#E1E5DC; --border-strong:#CBD3C7;
  --brand:#00653D; --brand-ink:#FFFFFF; --accent:#E4AC05; --accent-bright:#F9BC07; --accent-ink:#06231A;
  --link:#0C6E44; --pos:#1E8A50; --warn:#C77A0A; --neg:#C6462F; --ring:#F9BC07;
  --shadow-sm:0 1px 2px rgba(8,32,26,.06),0 2px 6px rgba(8,32,26,.05);
  --shadow-md:0 2px 6px rgba(8,32,26,.07),0 12px 28px rgba(8,32,26,.09);
  --shadow-lg:0 8px 20px rgba(8,32,26,.10),0 28px 60px rgba(8,32,26,.14);
  --shadow-brand:0 10px 30px rgba(0,101,61,.28);
}
:root[data-theme="dark"] {
  --bg:#08201A; --bg-2:#0B2A20; --surface:#0E2A20; --surface-2:#123227;
  --ink:#EAF2EC; --ink-soft:#A9BEB1; --ink-faint:#6E8579; --border:#1C3B2E; --border-strong:#2A4E3D;
  --brand:#2FBF77; --brand-ink:#052015; --accent:#F9BC07; --accent-bright:#FECB05; --accent-ink:#06231A;
  --link:#4FD08A; --pos:#46D08A; --warn:#E8A93A; --neg:#FF7E6E; --ring:#FECB05;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 2px 8px rgba(0,0,0,.4),0 14px 30px rgba(0,0,0,.4);
  --shadow-lg:0 10px 26px rgba(0,0,0,.45),0 30px 64px rgba(0,0,0,.5);
  --shadow-brand:0 10px 30px rgba(0,0,0,.5);
}