/* ============================================================
   oGo — design tokens
   Brand orange leads. Teal + neutrals balance it.
   Light mode default; dark mode via [data-theme] + system pref.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --orange:          #F9A825;   /* primary brand */
  --orange-deep:     #E58F00;   /* CTAs, pressed states */
  --orange-deeper:   #C97A00;   /* CTA hover */
  --orange-tint:     #FFF4E2;   /* soft fills */
  --orange-tint-2:   #FFE9C7;   /* slightly stronger fill */
  --orange-glow:     #FDD79A;   /* underline / glow accents */

  --teal:            #3F8B7F;   /* secondary accent */
  --teal-deep:       #2F6E64;
  --teal-tint:       #E7F2F0;

  --accent-stroke:   #372737;   /* structural accent border (used deliberately) */

  /* ---------- Light mode ---------- */
  --ink:        #262338;
  --ink-muted:  #546E7A;
  --surface:    #FFFFFF;
  --surface-2:  #FBFAF7;
  --surface-3:  #F5F2EC;
  --hairline:   #ECEAE4;        /* soft card edges (keeps the airy look) */
  --hairline-2: #DEDBD3;
  --shadow-rgb: 38, 35, 56;

  /* gradient endpoints for orange panels */
  --grad-orange-a: #FBB23C;
  --grad-orange-b: #E58F00;

  /* ---------- Type ---------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700; --fw-x: 800;

  --fs-cap:   0.8125rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lead:  1.125rem;
  --fs-h3:    clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem);
  --fs-h2:    clamp(1.85rem, 1.1rem + 2.8vw, 2.7rem);
  --fs-h1:    clamp(2.3rem, 1.2rem + 4vw, 3.6rem);
  --fs-disp:  clamp(2.6rem, 1.1rem + 5.4vw, 4.5rem);

  --lh-tight: 1.06; --lh-snug: 1.18; --lh-normal: 1.4; --lh-relaxed: 1.6;

  /* ---------- Spacing (4px base) ---------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --s-20:5rem; --s-24:6rem; --s-28:7rem;

  /* ---------- Radius ---------- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;

  /* ---------- Shadow ---------- */
  --sh-xs: 0 1px 2px rgba(var(--shadow-rgb), .06);
  --sh-sm: 0 2px 8px rgba(var(--shadow-rgb), .06), 0 1px 2px rgba(var(--shadow-rgb), .04);
  --sh-md: 0 10px 24px rgba(var(--shadow-rgb), .08), 0 2px 6px rgba(var(--shadow-rgb), .05);
  --sh-lg: 0 22px 48px rgba(var(--shadow-rgb), .12), 0 6px 16px rgba(var(--shadow-rgb), .06);
  --sh-orange: 0 14px 30px rgba(229, 143, 0, .30);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms; --t-mid: 280ms; --t-slow: 560ms;

  /* ---------- Layout ---------- */
  --max: 1180px;
  --px: clamp(1rem, 4vw, 2rem);
  --nav-h: 70px;
}

/* ---------- Dark mode (manual toggle) ---------- */
[data-theme="dark"] {
  --ink:        #F3F4F6;
  --ink-muted:  #9CA3AF;   /* lightened from brief's #546E7A to meet WCAG AA on #121212 */
  --surface:    #121212;
  --surface-2:  #1A1A1A;
  --surface-3:  #222226;
  --hairline:   #2A2A2E;
  --hairline-2: #3A3A40;
  --shadow-rgb: 0, 0, 0;
  --orange-tint:   #2A1F0E;
  --orange-tint-2: #3A2A10;
  --teal-tint:     #112320;

  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 2px 8px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25);
  --sh-md: 0 10px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --sh-lg: 0 22px 48px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
}

/* ---------- Dark mode (system pref, when user hasn't chosen light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --ink:        #F3F4F6;
    --ink-muted:  #9CA3AF;
    --surface:    #121212;
    --surface-2:  #1A1A1A;
    --surface-3:  #222226;
    --hairline:   #2A2A2E;
    --hairline-2: #3A3A40;
    --shadow-rgb: 0, 0, 0;
    --orange-tint:   #2A1F0E;
    --orange-tint-2: #3A2A10;
    --teal-tint:     #112320;
    --sh-xs: 0 1px 2px rgba(0,0,0,.4);
    --sh-sm: 0 2px 8px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25);
    --sh-md: 0 10px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --sh-lg: 0 22px 48px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
  }
}

/* Logo swap by theme: orange logo on light, white logo on dark. */
.logo-img--light { display: block; }
.logo-img--dark  { display: none; }
[data-theme="dark"] .logo-img--light { display: none; }
[data-theme="dark"] .logo-img--dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .logo-img--light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .logo-img--dark  { display: block; }
}