/*
 * Hypatia Design Tokens — single source of truth for every visual variable.
 *
 * Composition model:
 *   :root                          → baseline defaults (used everywhere)
 *   :root[data-platform="X"]       → platform pack overrides (apple/clean/terminal/…)
 *   :root[data-density="X"]        → personal density knob
 *   :root[data-font-scale="X"]     → personal font-size knob
 *   :root[data-font-family="X"]    → personal font-family knob
 *   :root[data-motion="X"]         → personal motion knob
 *   :root[data-contrast="X"]       → personal contrast knob
 *   :root[style="--accent-user…"]  → personal accent override (highest priority)
 *
 * Components consume tokens via var(--token, fallback). Platform/knob layers
 * cascade naturally because they all set the same token names at :root.
 *
 * Added 2026-04-30 (PM) — token refactor enabling deep platform feel without
 * per-component per-platform CSS.
 */

/* ──────────────────────────────────────────────────────────────────────────
 * BASELINE — sane defaults composing with the cyberpunk-default platform.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Typography */
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:   var(--font-ui);
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
  --font-serif:     'Newsreader', Georgia, 'Times New Roman', serif;
  --font-scale:     1.0;
  --font-size-xs:   calc(11px * var(--font-scale));
  --font-size-sm:   calc(13px * var(--font-scale));
  --font-size-base: calc(15px * var(--font-scale));
  --font-size-md:   calc(17px * var(--font-scale));
  --font-size-lg:   calc(20px * var(--font-scale));
  --font-size-xl:   calc(24px * var(--font-scale));
  --font-size-2xl:  calc(32px * var(--font-scale));
  --font-size-3xl:  calc(44px * var(--font-scale));
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --line-height-tight:  1.25;
  --line-height-normal: 1.5;

  /* Radius */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-card: 12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.06);
  --shadow-card:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.12);
  --shadow-glow:  0 0 16px rgba(99,102,241,.30); /* cyberpunk neon by default */
  --shadow-button: var(--shadow-sm);

  /* Border */
  --border-width: 1px;
  --border-color: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.20);

  /* Density (vertical + horizontal pad on cards / rows / chips) */
  --density-card-pad:    16px;
  --density-row-pad-y:   10px;
  --density-row-pad-x:   14px;
  --density-button-pad-y: 8px;
  --density-button-pad-x: 14px;
  --density-input-pad-y:  8px;
  --density-input-pad-x:  12px;
  --density-section-gap: 24px;
  --density-stack-gap:   12px;

  /* Motion */
  --motion-fast:    150ms;
  --motion-base:    220ms;
  --motion-slow:    400ms;
  --motion-easing:  cubic-bezier(.4, 0, .2, 1);
  --motion-spring:  cubic-bezier(.32, .72, 0, 1);

  /* Contrast (text vs background; theme files set the actual hues) */
  --contrast-text:    1.0;   /* multiplier for text alpha */
  --contrast-border:  1.0;   /* multiplier for border alpha */
  --contrast-shadow:  1.0;   /* multiplier for shadow alpha */

  /* Accent — themes set this; user can override via --accent-user.
   * 2026-05-01: bumped baseline from #6366f1 (indigo-500, lum ~0.19, ratio 3.4
   * vs near-black) to #818cf8 (indigo-400, lum ~0.30, ratio 4.9) so any theme
   * that doesn't override --accent still hits WCAG AA on a dark background. */
  --accent-user:  initial;   /* unset by default; users override per-account */
  --accent:       var(--accent-user, #818cf8);
  --accent-hover: var(--accent-user, #6366f1);
}

/* ──────────────────────────────────────────────────────────────────────────
 * PLATFORM PACKS — set ALL tokens that should change per platform here.
 * Components consume tokens, so a single platform swap propagates everywhere.
 * ────────────────────────────────────────────────────────────────────────── */

/* Clean (ChatGPT-style) — system sans, subtle shadows, no neon */
:root[data-platform="clean"] {
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  --font-display: var(--font-ui);
  --letter-spacing-tight: -0.005em;
  --letter-spacing-wide:   0;
  --radius-card: 8px;
  --radius-base: 6px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-glow: none;
  --shadow-button: var(--shadow-sm);
  --motion-easing: cubic-bezier(.4, 0, .2, 1);
}

/* Terminal
:root[data-platform="terminal"] {
  --font-ui: var(--font-mono);
  --font-display: var(--font-mono);
  --letter-spacing-tight: 0;
  --letter-spacing-wide: 0.04em;
  --radius-card: 0;
  --radius-base: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --shadow-card: none;
  --shadow-lg: none;
  --shadow-glow: 0 0 8px currentColor;
  --shadow-button: 0 0 0 1px currentColor;
  --motion-fast: 0ms;
  --motion-base: 0ms;
  --motion-slow: 80ms;
  --motion-easing: linear;
  --border-width: 1px;
  --border-color: rgba(0,255,128,.30);
}

/* Modern — frosted glass, pill shapes, spring motion (Apple + Messenger merged) */
:root[data-platform="modern"] {
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --letter-spacing-tight: -0.022em;
  --letter-spacing-normal: -0.005em;
  --radius-card: 14px;
  --radius-base: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 30px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.16);
  --shadow-glow: none;
  --shadow-button: 0 1px 2px rgba(0,0,0,.10), 0 0 0 0.5px rgba(0,0,0,.08);
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --motion-easing: cubic-bezier(.32, .72, 0, 1);
  --motion-spring: cubic-bezier(.32, .72, 0, 1);
  --density-card-pad: 20px;
  --density-button-pad-y: 10px;
  --density-button-pad-x: 18px;
  --font-weight-body: 410;
  --font-weight-medium: 510;
}

/* Compact — denser everything (no other look changes) */
:root[data-platform="compact"] {
  --density-card-pad:    10px;
  --density-row-pad-y:   6px;
  --density-row-pad-x:   10px;
  --density-button-pad-y: 5px;
  --density-button-pad-x: 10px;
  --density-input-pad-y:  6px;
  --density-input-pad-x:  10px;
  --density-section-gap: 14px;
  --density-stack-gap:    8px;
  --font-size-base: calc(13px * var(--font-scale));
}

/* Accessible
:root[data-platform="accessible"] {
  --font-scale: 1.15;
  --letter-spacing-normal: 0.01em;
  --line-height-normal: 1.65;
  --motion-fast: 250ms;
  --motion-base: 350ms;
  --border-width: 2px;
  --border-color:var(--muted);
  --border-strong: rgba(255,255,255,.55);
  --contrast-text:    1.15;
  --contrast-border:  1.6;
  --shadow-card: 0 0 0 2px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.20);
}

/* ──────────────────────────────────────────────────────────────────────────
 * PERSONAL KNOBS — these layer on top of platform packs.
 * Order in the cascade: baseline → platform → knobs (knobs always win).
 * ────────────────────────────────────────────────────────────────────────── */

/* Density knob: compact / cozy / comfortable */
:root[data-density="compact"] {
  --density-card-pad:    10px;
  --density-row-pad-y:   6px;
  --density-row-pad-x:   10px;
  --density-button-pad-y: 5px;
  --density-button-pad-x: 10px;
  --density-input-pad-y:  6px;
  --density-input-pad-x:  10px;
  --density-section-gap: 14px;
  --density-stack-gap:    8px;
}
:root[data-density="cozy"] {
  --density-card-pad:    16px;
  --density-row-pad-y:   10px;
  --density-row-pad-x:   14px;
  --density-button-pad-y: 8px;
  --density-button-pad-x: 14px;
  --density-input-pad-y:  8px;
  --density-input-pad-x:  12px;
  --density-section-gap: 24px;
  --density-stack-gap:   12px;
}
:root[data-density="comfortable"] {
  --density-card-pad:    22px;
  --density-row-pad-y:   14px;
  --density-row-pad-x:   18px;
  --density-button-pad-y: 11px;
  --density-button-pad-x: 18px;
  --density-input-pad-y:  10px;
  --density-input-pad-x:  14px;
  --density-section-gap: 32px;
  --density-stack-gap:   18px;
}

/* Font scale knob: 0.9 / 1.0 / 1.1 / 1.25 / 1.5 */
:root[data-font-scale="0.9"]   { --font-scale: 0.90; }
:root[data-font-scale="1.0"]   { --font-scale: 1.00; }
:root[data-font-scale="1.1"]   { --font-scale: 1.10; }
:root[data-font-scale="1.25"]  { --font-scale: 1.25; }
:root[data-font-scale="1.5"]   { --font-scale: 1.50; }

/* Font family knob: system / inter / serif / mono / dyslexic */
:root[data-font-family="system"]   { --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: var(--font-ui); }
:root[data-font-family="inter"]    { --font-ui: 'Inter', sans-serif; --font-display: 'Inter', sans-serif; }
:root[data-font-family="serif"]    { --font-ui: 'Newsreader', Georgia, serif; --font-display: 'Newsreader', Georgia, serif; }
:root[data-font-family="mono"]     { --font-ui: var(--font-mono); --font-display: var(--font-mono); }
:root[data-font-family="dyslexic"] { --font-ui: 'OpenDyslexic', 'Atkinson Hyperlegible', 'Comic Sans MS', sans-serif; --font-display: var(--font-ui); }

/* Motion knob: full / reduced / off */
:root[data-motion="full"]    { /* defaults */ }
:root[data-motion="reduced"] {
  --motion-fast: 100ms;
  --motion-base: 140ms;
  --motion-slow: 200ms;
  --motion-easing: ease-out;
  --motion-spring: ease-out;
}
:root[data-motion="off"] {
  --motion-fast: 0ms;
  --motion-base: 0ms;
  --motion-slow: 0ms;
  --motion-easing: linear;
  --motion-spring: linear;
}
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0ms !important;
  transition-duration: 0ms !important;
  animation-iteration-count: 1 !important;
}

/* Contrast knob: normal / high / max (AAA) */
:root[data-contrast="normal"] { /* defaults */ }
:root[data-contrast="high"] {
  --contrast-text: 1.10;
  --contrast-border: 1.4;
  --contrast-shadow: 1.2;
  --border-color: rgba(255,255,255,.20);
  --border-strong: rgba(255,255,255,.40);
}
:root[data-contrast="max"] {
  --contrast-text: 1.20;
  --contrast-border: 2.0;
  --contrast-shadow: 1.6;
  --border-color:var(--muted);
  --border-strong: rgba(255,255,255,.85);
  --shadow-card: 0 0 0 2px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.25);
}

/* ──────────────────────────────────────────────────────────────────────────
 * USER ACCENT OVERRIDE — set inline on :root by JS when a user picks an accent.
 * <html style="--accent-user: #ff5599"> wins over any theme accent.
 * ────────────────────────────────────────────────────────────────────────── */

/* Already wired via fallback chain in baseline:
 *   --accent: var(--accent-user, <theme accent>);
 * Themes should set --accent-fallback; baseline computes --accent from
 * the user's override OR the theme's fallback.
 */

/* ──────────────────────────────────────────────────────────────────────────
 * GLOBAL RIDERS — apply tokens to body + common element groups so every
 * page picks up the changes without per-page edits.
 * ────────────────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-ui);
  font-size:   var(--font-size-base);
  line-height: var(--line-height-normal);
}
input, textarea, select, button {
  font-family: var(--font-ui);
}
h1, h2, h3, h4, .hero-title, .section-title, .panel-title, .card-title, .lc-title, .pl-title, .sec-hdr {
  font-family: var(--font-display);
  letter-spacing: var(--letter-spacing-tight);
}
/* 2026-05-04: scoped to .dp-preview so the design-token riders only style
   the Display Panel live-preview tile on the Profile page. Previously these
   were unscoped and leaked into every .card / .panel / button on the page,
   overriding page-specific padding, border-radius, and box-shadow. Nav bar
   buttons, tab panels, sidebar tabs, and page cards all got wrong spacing. */
.dp-preview .card, .dp-preview .launch-card, .dp-preview .status-card,
.dp-preview .panel, .dp-preview .deal-card, .dp-preview .cat-card,
.dp-preview .step-card, .dp-preview .cap-card, .dp-preview .ann-card,
.dp-preview .feed-greeting, .dp-preview .activity-card,
.dp-preview .hero-box, .dp-preview .tier,
.dp-preview-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--density-card-pad);
}
.dp-preview button, .dp-preview .btn, .dp-preview .action-btn,
.dp-prev-btn-primary, .dp-prev-btn-secondary {
  border-radius: var(--radius-base);
  padding: var(--density-button-pad-y) var(--density-button-pad-x);
  transition: transform var(--motion-fast) var(--motion-easing),
              box-shadow var(--motion-fast) var(--motion-easing),
              background var(--motion-fast) var(--motion-easing);
}
.dp-preview input, .dp-preview textarea, .dp-preview select {
  border-radius: var(--radius-base);
  padding: var(--density-input-pad-y) var(--density-input-pad-x);
  transition: border-color var(--motion-fast) var(--motion-easing),
              box-shadow var(--motion-fast) var(--motion-easing);
}

/* ───────────────────────────────────────────────────────────────────────
 * DEVICE PRESETS — tune the CSS to a specific phone's quirks.
 * Layered AFTER platform + knobs so device-specific overrides always win.
 * Sets safe-area floors, optimal density, thumb-reach tap targets, and
 * fold-specific dual-pane behavior.
 *
 * Use: <html data-device="iphone-16-pro-max">
 * Available: iphone-15-pro / iphone-16 / iphone-16-pro-max /
 *            pixel-9 / pixel-9-pro-fold-folded / pixel-9-pro-fold-unfolded /
 *            galaxy-s24-ultra / galaxy-s25-ultra / galaxy-z-fold-6
 * ─────────────────────────────────────────────────────────────────────── */

/* Baseline device tokens consumed by .has-safe-* utility classes. */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --tap-min:     44px;            /* WCAG 2.5.5 / Apple HIG */
  --thumb-reach-bottom: 0px;       /* extra padding bottom for thumb-reach UI */
  --island-clearance: 0px;         /* clearance below dynamic island / punch-hole */
  --fold-mode: "single";           /* single | dual-pane (set per device) */
}

/* iPhone 15/16 family — dynamic island carve-out + thumb-reach bump */
:root[data-device="iphone-15-pro"],
:root[data-device="iphone-16"],
:root[data-device="iphone-16-pro"],
:root[data-device="iphone-16-pro-max"] {
  --safe-top:    max(env(safe-area-inset-top, 59px), 59px);
  --safe-bottom: max(env(safe-area-inset-bottom, 34px), 34px);
  --island-clearance: 14px;
  --tap-min: 48px;
  --thumb-reach-bottom: 12px;
  --motion-easing: cubic-bezier(.32, .72, 0, 1);  /* Apple's spring on real Apple device */
}
/* The Pro Max is bigger; one-handed thumb reach is harder so push interactive
 * elements an extra 8px up + 1.05x font scale so legibility isn't sacrificed
 * to physical reach. */
:root[data-device="iphone-16-pro-max"] {
  --thumb-reach-bottom: 20px;
  --font-scale: max(var(--font-scale, 1), 1.05);
  --density-card-pad:    20px;
  --density-button-pad-y: 11px;
  --density-button-pad-x: 18px;
}

/* Pixel 9 / Pixel 9 Pro Fold (folded) — punch-hole + Material 3 sizing */
:root[data-device="pixel-9"],
:root[data-device="pixel-9-pro"],
:root[data-device="pixel-9-pro-fold-folded"] {
  --safe-top:    max(env(safe-area-inset-top, 30px), 30px);
  --safe-bottom: max(env(safe-area-inset-bottom, 24px), 24px);
  --island-clearance: 8px;
  --tap-min: 48px;
  --thumb-reach-bottom: 12px;
  /* Material 3 motion timing on real Pixel hardware */
  --motion-fast:    180ms;
  --motion-base:    260ms;
  --motion-easing:  cubic-bezier(.2, 0, 0, 1);
}

/* Pixel 9 Pro Fold UNFOLDED — inner 768x1024 tablet-like display.
 * Switch to dual-pane potential + tablet density. */
:root[data-device="pixel-9-pro-fold-unfolded"] {
  --safe-top:    max(env(safe-area-inset-top, 24px), 24px);
  --safe-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
  --tap-min: 48px;
  --fold-mode: "dual-pane";
  --density-card-pad: 24px;
  --density-section-gap: 32px;
  --motion-easing: cubic-bezier(.2, 0, 0, 1);
  --font-scale: max(var(--font-scale, 1), 1.10);
}

/* Samsung Galaxy S24 / S25 Ultra — punch-hole + Galaxy density */
:root[data-device="galaxy-s24-ultra"],
:root[data-device="galaxy-s25-ultra"] {
  --safe-top:    max(env(safe-area-inset-top, 32px), 32px);
  --safe-bottom: max(env(safe-area-inset-bottom, 24px), 24px);
  --island-clearance: 10px;
  --tap-min: 48px;
  --thumb-reach-bottom: 16px;
  /* S Pen-friendly: slightly larger touch targets + denser cards because
   * 6.9" Ultra screen real estate is generous. */
  --density-card-pad: 18px;
  --density-row-pad-y: 11px;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);  /* OneUI "emphasized" curve */
}
/* Galaxy S25 Ultra has slightly higher PPI — bump font legibility a notch */
:root[data-device="galaxy-s25-ultra"] {
  --font-scale: max(var(--font-scale, 1), 1.05);
}

/* Galaxy Z Fold 6 — unfolded book-mode (832x882 inner). Same dual-pane play
 * as the Pixel Fold; OneUI motion. */
:root[data-device="galaxy-z-fold-6"] {
  --safe-top:    max(env(safe-area-inset-top, 24px), 24px);
  --safe-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
  --tap-min: 48px;
  --fold-mode: "dual-pane";
  --density-card-pad: 24px;
  --density-section-gap: 32px;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);
  --font-scale: max(var(--font-scale, 1), 1.10);
}

/* ── Utility classes any page can opt into to consume safe areas ── */
.has-safe-top    { padding-top:    var(--safe-top); }
.has-safe-bottom { padding-bottom: var(--safe-bottom); }
.has-safe-x      { padding-left: var(--safe-left); padding-right: var(--safe-right); }
.has-safe-all    {
  padding-top:    var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left:   var(--safe-left);
  padding-right:  var(--safe-right);
}
.has-island-clearance { padding-top: calc(var(--safe-top) + var(--island-clearance)); }
.has-thumb-reach      { padding-bottom: calc(var(--safe-bottom) + var(--thumb-reach-bottom)); }

/* Bottom-anchored interactive elements should hit the tap-min floor on
 * real-device presets so tap accuracy doesn't suffer from device pixel
 * density variation.
 * 2026-05-04: exclude nav-bar buttons (#hy-nav, dropdown items) so the
 * 48px tap-min doesn't bloat the fixed nav height. */
:root[data-device] button:not(.dp-segmented button):not(#hy-nav button):not(.desk-dd-footer button):not(.mob-dd-footer button),
:root[data-device] .btn:not(.desk-dd-item):not(.mob-dd-item),
:root[data-device] a.action-btn {
  min-height: var(--tap-min);
}

/* Dual-pane fold layout — pages that opt in via .fold-aware get a
 * grid-template-columns split when the host device reports unfolded. */
:root[data-device="pixel-9-pro-fold-unfolded"] .fold-aware,
:root[data-device="galaxy-z-fold-6"] .fold-aware {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--density-section-gap, 24px);
}

/* Apple platform: frosted-glass cards (the structural rule that needs more
 * than a token swap). Other platforms can declare similar structural rules
 * here as needed — keep the count small. */
:root[data-platform="apple"] .card,
:root[data-platform="apple"] .launch-card,
:root[data-platform="apple"] .status-card,
:root[data-platform="apple"] .panel {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background:var(--bg-card);
}
:root[data-platform="apple"][data-mode="light"] .card,
:root[data-platform="apple"][data-mode="light"] .launch-card,
:root[data-platform="apple"][data-mode="light"] .status-card,
:root[data-platform="apple"][data-mode="light"] .panel {
  background: rgba(255,255,255,.72);
}