/* ── Design tokens ──────────────────────────────────────────────
   Light is the default theme (:root). Dark is the opt-in override
   ([data-theme="dark"]) and preserves the original v1.0–v1.2 values
   verbatim. Theme-agnostic tokens (fonts, type, spacing, radius,
   easing, editor canvas) live in :root only. */
:root{
  color-scheme:light;

  /* surfaces — light */
  --bg:#f6f7f8; --bg-2:#eef0f2; --surface:#ffffff; --surface-2:#f3f4f6;
  --line:#e3e6e9; --line-bright:#d0d5da;
  --ink:#14181b; --muted:#566069; --faint:#737d86;

  /* accents — coral identity kept; text accents darkened for AA on white */
  --coral:#ea4b71; --coral-2:#ff7a9c; --green:#0a7a4e; --ice:#2f6df0; --amber:#b45309; --red:#dc2626;
  --coral-soft:oklch(72% 0.17 12);
  --coral-ghost:oklch(64% 0.19 12 / 0.10);
  --lime:#c42c52;                            /* text-accent alias — AA-safe on light */
  --coral-strong:#c42c52;                    /* solid CTA fills with white text — AA both themes */

  /* editor canvas — intentionally light in both themes; cooler in light so it reads as a distinct panel */
  --canvas:#eceff4; --canvas-dot:#d3d3da; --canvas-node:#ffffff; --canvas-border:#dcdde4; --canvas-ink:#1c1c1f; --canvas-muted:#8a8a92; --wire:#c2c2cc;

  /* themed chrome */
  --nav-bg:rgba(247,248,250,0.80);
  --grain-opacity:0.16;
  --photo-veil:rgba(20,24,27,0.55);

  /* fonts (theme-agnostic) */
  --display:'Bricolage Grotesque','Bricolage Fallback',system-ui,Georgia,serif;
  --body:'Hanken Grotesk','Hanken Fallback',-apple-system,system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;
  --w-body:400; --w-medium:500; --w-semibold:600; --w-display:800;

  /* type scale (theme-agnostic) */
  --text-xs:.74rem;
  --text-sm:.85rem;
  --text-base:clamp(1rem,0.96rem + 0.2vw,1.08rem);
  --text-lg:clamp(1.1rem,1rem + 0.4vw,1.3rem);
  --text-xl:clamp(1.4rem,1.15rem + 1vw,1.9rem);
  --text-2xl:clamp(2rem,1.5rem + 2vw,3rem);
  --text-3xl:clamp(2.6rem,1.8rem + 3.4vw,4.4rem);
  --text-hero:clamp(3rem,1.2rem + 7vw,6.6rem);

  /* spacing (theme-agnostic) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --space:clamp(3.5rem,2.5rem + 3vw,6rem);
  --maxw:1160px;

  /* radius (theme-agnostic) */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  /* elevation — light (soft neutral shadows) */
  --elev-1:0 1px 2px rgba(16,24,40,.06);
  --elev-2:0 8px 24px rgba(16,24,40,.08);
  --elev-3:0 20px 55px rgba(16,24,40,.12);
  --shadow-strong:0 30px 70px -45px rgba(16,24,40,.40);
  --glow-coral:0 0 0 1px oklch(64% 0.19 12 / .22), 0 8px 30px oklch(64% 0.19 12 / .14);

  /* motion (theme-agnostic) */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:150ms; --duration-normal:300ms; --duration-slow:560ms;

  /* glass — light: bright translucent surfaces; tint keeps text AA over frosted bg */
  --glass-bg:rgba(255,255,255,0.55);
  --glass-bg-2:rgba(255,255,255,0.42);
  --glass-border:rgba(255,255,255,0.65);
  --glass-edge:rgba(255,255,255,0.9);    /* specular top-edge highlight */
  --glass-blur:14px;
  --glass-saturate:1.6;                  /* pull content color through (iOS "color reflection") */
  --glass-sheen:rgba(255,255,255,0.35);
}

[data-theme="dark"]{
  color-scheme:dark;

  --bg:#0a0c0b; --bg-2:#0f1311; --surface:#141917; --surface-2:#1b211e;
  --line:#242c28; --line-bright:#33403a;
  --ink:#eaf0ea; --muted:#9aa49c; --faint:#7c857d;

  --green:#34c08b; --ice:#6ea8fe; --amber:#fbbf24; --red:#ff6b6b;
  --lime:var(--coral);

  /* editor canvas stays as originally shipped in dark */
  --canvas:#f7f7f9; --canvas-border:#e3e3e8;

  --nav-bg:rgba(10,12,11,0.70);
  --grain-opacity:0.40;
  --photo-veil:rgba(10,12,11,0.92);

  --elev-1:0 1px 2px rgba(0,0,0,.3);
  --elev-2:0 6px 24px rgba(0,0,0,.35);
  --elev-3:0 18px 60px rgba(0,0,0,.45);
  --shadow-strong:0 40px 90px -50px rgba(0,0,0,.85);
  --glow-coral:0 0 0 1px oklch(64% 0.19 12 / .25), 0 8px 40px oklch(64% 0.19 12 / .18);

  /* glass — dark: translucent dark surface with luminous edge; blur 16px (capped for GPU) */
  --glass-bg:rgba(20,25,23,0.55);
  --glass-bg-2:rgba(27,33,30,0.45);
  --glass-border:rgba(255,255,255,0.12);
  --glass-edge:rgba(255,255,255,0.22);   /* luminous edge on dark */
  --glass-blur:16px;
  --glass-saturate:1.5;
  --glass-sheen:rgba(255,255,255,0.10);
}

/* Theme cross-fade — only after first paint, never on initial load.
   Fully disabled under reduced-motion (see main.css kill-switch too). */
.theme-transition,
.theme-transition body,
.theme-transition nav,
.theme-transition .card,
.theme-transition .work,
.theme-transition .repo,
.theme-transition .persona,
.theme-transition .tcard,
.theme-transition details.faq,
.theme-transition .editor,
.theme-transition .calc{
  transition:background-color var(--duration-normal) var(--ease),
             color var(--duration-normal) var(--ease),
             border-color var(--duration-normal) var(--ease);
}
@media(prefers-reduced-motion:reduce){
  .theme-transition,.theme-transition *{transition:none!important}
}