/* ============================================================
   Enlightened Transport LLC — Design Tokens
   Hallmark · studied-DNA (source: Enlightenment LLC)
   All values are OKLCH custom properties; hex in comments.
   ============================================================ */

/* ---------- Google Fonts import ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ---------- Shared accent gold (both themes) ---------- */
:root {
  --gold-1: oklch(74% 0.105 88);     /* #c8a84b base */
  --gold-2: oklch(82% 0.10 90);      /* #dfc072 */
  --gold-3: oklch(89% 0.075 92);     /* #f0d898 */
  --gold-ink: oklch(44% 0.085 75);   /* deep gold — ONLY gold allowed as text, light surfaces only; ~5.7:1 on ivory (AA+) */

  --gold-gradient: linear-gradient(135deg, var(--gold-1), var(--gold-3));

  /* ---------- Typography ---------- */
  /* Unified to one warm geometric sans — Grab-like energy, less luxury serif.
     display + body share the family; weight carries the hierarchy. */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  /* ---------- Type scale (responsive clamp) ---------- */
  --text-base: 1.125rem;             /* 18px — hard a11y floor */
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --text-display-s: clamp(2.25rem, 5vw, 3.5rem);
  --text-display: clamp(2.75rem, 6vw, 4.75rem);

  /* ---------- Spacing (4pt scale) ---------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---------- Motion ---------- */
  --ease-expo:   cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --dur-fast: 180ms;
  --dur-mid:  520ms;
  --dur-slow: 800ms;
  --dur-emblem: 8s;                /* hero-emblem bob loop (matches sister-site float-a) */

  /* ---------- Layout ---------- */
  --page-max: 80rem;
  --page-gutter: clamp(var(--space-md), 5vw, var(--space-xl));
  --radius-card: 0.75rem;
  --radius-pill: 999px;

  /* ---------- Grab-UX tokens (A–E) ---------- */
  --radius-chip: 14px;             /* app-icon chip + numbered tile badge */
  --chip-size: 52px;               /* icon chip bounding box */
  --gold-tint-bg: oklch(93% 0.014 85 / 0.72); /* chip bg: paper-2 with slight warmth, no new hue */
  --shadow-tile: 0 4px 18px oklch(0% 0 0 / 0.09);   /* card hover lift shadow */
  --shadow-tile-hover: 0 8px 28px oklch(0% 0 0 / 0.14);
  --dur-step: 150ms;               /* step crossfade duration (within 150–200ms spec) */
}

/* ============================================================
   IVORY THEME (default — accessibility choice for elderly/low-vision)
   ============================================================ */
:root {
  --paper:   oklch(96% 0.012 85);    /* warm ivory ~#f7f2e8 */
  --paper-2: oklch(93% 0.014 85);    /* slightly deeper ivory for elevated panels */
  --paper-3: oklch(90% 0.016 84);

  --ink:      oklch(24% 0.012 70);   /* deep warm charcoal ~#211c16 — body text ≥7:1 on paper */
  --ink-soft: oklch(40% 0.012 70);   /* secondary text ≥4.5:1 */

  --hairline: oklch(80% 0.02 85);

  --btn-ink: oklch(22% 0.03 70);     /* text on gold buttons */

  /* hero bloom: off in ivory */
  --hero-bloom: none;

  /* focus ring */
  --focus-ring-color: var(--gold-ink);
}

/* ============================================================
   DARK THEME — override paper/ink/surface tokens only
   ============================================================ */
:root[data-theme="dark"] {
  --paper:   oklch(13% 0 0);         /* near-black #050505 */
  --paper-2: oklch(20% 0 0);         /* elevation */
  --paper-3: oklch(26% 0 0);         /* #232323 */

  --ink:      oklch(94% 0.012 85);   /* warm off-white #f0ece3 ≥7:1 on paper */
  --ink-soft: oklch(78% 0.012 85);   /* secondary ≥4.5:1 */

  --hairline: oklch(30% 0.01 85);

  --btn-ink: oklch(18% 0.02 70);     /* dark text on gold buttons */

  /* hero bloom: subtle gold radial ~22% footprint, no animation */
  --hero-bloom: radial-gradient(60% 50% at 70% 20%, oklch(74% 0.105 88 / 0.10), transparent);

  --focus-ring-color: var(--gold-2);
}