/* ============================================================
   AURORA PORTFOLIO — DESIGN TOKENS
   Apple-keynote world: vast neutral surfaces, ultra-bold Inter,
   iridescent aurora light. Two full themes; aurora color only
   ever renders as light (gradient/glow/blur), never flat chrome.
   ============================================================ */

:root {
  /* grounds — light theme */
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --ink: #0a0a0c;
  --ink-secondary: #55555f;

  /* glass */
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(10, 10, 12, 0.08);

  /* aurora — light, not paint */
  --aurora-violet: #7c3aed;
  --aurora-blue: #2563eb;
  --aurora-cyan: #06b6d4;
  --aurora-pink: #ec4899;
  --aurora-orange: #f97316;
  --aurora-gradient: linear-gradient(100deg, var(--aurora-violet), var(--aurora-blue) 30%, var(--aurora-cyan) 55%, var(--aurora-pink) 80%, var(--aurora-orange));

  /* sentiment — the one place the site says good / watchful / bad in
     color. Three steps, no more: research supports three. */
  --mood-high: #22c55e;
  --mood-even: #f5b800;
  --mood-low: #ef4444;

  /* depth */
  --shadow-card: 0 12px 40px rgba(10, 10, 12, 0.08);
  --shadow-card-hover: 0 24px 60px rgba(10, 10, 12, 0.12);
  --shadow-pop: 0 32px 80px rgba(10, 10, 12, 0.18);

  /* shape */
  --r-pill: 999px;
  --r-card: 1.75rem;
  --r-thumb: 1rem;

  /* type — Inter only */
  --font: "Inter", sans-serif;
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.7rem + 1.8vw, 3.2rem);
  --step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem);
  --step-5: clamp(3rem, 2rem + 5vw, 6rem);

  --measure: 70ch;
  /* wide stage: small side margins, content breathes to 88rem */
  --container: 88rem;

  /* space — 8px-derived */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;

  /* Safe areas — the display cutouts and the home indicator.
     Read once here so no rule has to repeat the env() fallback, and so the
     whole set can be simulated from devtools by overriding these four.
     They only report non-zero when the page opts into edge-to-edge layout
     with `viewport-fit=cover` in the viewport meta; without that they are
     0px everywhere and every rule below collapses to its old value. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 0.3s;
  --t-reveal: 0.6s;
  --t-count: 1.2s;

  /* Gradient edge — a hairline that reads as a lit bevel rather than a flat
     stroke. On light surfaces a white highlight would be invisible, so the
     edge is ink and sits heaviest on the shadow side (bottom-right),
     thinning toward the light (top-left). */
  --edge-far: rgba(10, 10, 12, 0.22);
  --edge-mid: rgba(10, 10, 12, 0.07);
  --edge-near: rgba(10, 10, 12, 0.11);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0a0a0c;
  --bg-soft: #151518;
  --ink: #f5f5f7;
  --ink-secondary: #a5a5ae;

  --glass: rgba(21, 21, 24, 0.6);
  --glass-strong: rgba(21, 21, 24, 0.8);
  --glass-border: rgba(245, 245, 247, 0.1);

  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 32px 80px rgba(0, 0, 0, 0.7);

  /* Inverted on dark: the edge is light and catches hardest where the light
     would fall, at the top-left, fading into the surround opposite. */
  --edge-far: rgba(245, 245, 247, 0.16);
  --edge-mid: rgba(245, 245, 247, 0.05);
  --edge-near: rgba(245, 245, 247, 0.36);

  color-scheme: dark;
}