/* assets/theme.css — single source of truth for color across the site.
   Dark is the :root default so a failed pre-paint script degrades to the
   established brand look. [data-theme="light"] overrides. Components must
   reference tokens only — raw hex/oklch literals belong in this file alone. */

:root {
  color-scheme: dark;

  /* ── semantic ─────────────────────────────────────────
     Dark theme is the original black-and-orange brand: orange is the accent,
     purple appears only in light mode. --bg is a touch lighter than the old
     near-black navy. */
  --bg:               oklch(13% 0.016 252);
  --bg-elevated:      oklch(19% 0.020 252);
  --surface:          oklch(16% 0.018 252);
  --text:             oklch(97% 0.006 252);
  --text-muted:       oklch(72% 0.012 252);
  --text-faint:       oklch(66% 0.012 252);
  --accent-primary:   oklch(76% 0.145 52);   /* orange (dark brand accent) */
  --accent-secondary: oklch(76% 0.145 52);   /* orange */
  --border:           oklch(100% 0 0 / .07);
  --border-2:         oklch(100% 0 0 / .13);
  --border-3:         oklch(100% 0 0 / .22);
  --glow:             oklch(76% 0.145 52 / .12);

  /* text/ink that sits on top of accent fills */
  --on-accent:            oklch(13% 0.02 52);
  --on-accent-secondary:  oklch(13% 0.02 52);

  /* CTA = orange */
  --cta:        var(--accent-secondary);
  --cta-hover:  oklch(81% 0.155 52);
  --on-cta:     var(--on-accent-secondary);

  /* translucent chrome */
  --overlay:     oklch(13% 0.016 252 / .97);
  --overlay-nav: oklch(13% 0.016 252 / .88);

  /* shadows */
  --shadow-color:        oklch(0% 0 0 / .4);
  --shadow-color-strong: oklch(0% 0 0 / .6);

  /* status */
  --success: oklch(72% 0.15 155);
  --danger:  oklch(66% 0.19 26);
  --warning: oklch(80% 0.18 72);
  --info:    oklch(68% 0.16 245);

  /* motion (shared site-wide) */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* aurora effect colors as raw RGB triplets (parsed by fx-aurora.js).
     Dark theme = warm orange/amber to match the black-and-orange brand. */
  --fx-aurora-1: 196 128 82;   /* muted orange */
  --fx-aurora-2: 168 136 100;  /* warm sand */
  --fx-aurora-3: 186 110 70;   /* muted ember */
  --fx-aurora-alpha: 0.12;

  /* ── legacy aliases (existing page CSS references these) ── */
  --surface2: var(--bg-elevated);
  --muted:    var(--text-muted);
  --faint:    var(--text-faint);
  --accent:   var(--accent-primary);
  --border2:  var(--border-2);
  --border3:  var(--border-3);
  --a-dim:    color-mix(in oklab, var(--accent-primary) 8%, transparent);
  --a-bdr:    color-mix(in oklab, var(--accent-primary) 28%, transparent);
  --a-glow:   var(--glow);
  --green:    var(--success);
  --g-dim:    color-mix(in oklab, var(--success) 8%, transparent);
  --g-bdr:    color-mix(in oklab, var(--success) 22%, transparent);
  --red:      var(--danger);
  --r-dim:    color-mix(in oklab, var(--danger) 8%, transparent);
  --r-bdr:    color-mix(in oklab, var(--danger) 22%, transparent);
  --amber:    var(--warning);
  --am-dim:   color-mix(in oklab, var(--warning) 8%, transparent);
  --am-bdr:   color-mix(in oklab, var(--warning) 22%, transparent);
  --blue:     var(--info);
  --b-dim:    color-mix(in oklab, var(--info) 8%, transparent);
  --b-bdr:    color-mix(in oklab, var(--info) 22%, transparent);
  --purple:   var(--accent-primary);
}

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

  --bg:               oklch(93.5% 0.022 83);   /* calm warm beige, not stark white */
  --bg-elevated:      oklch(90% 0.026 83);
  --surface:          oklch(96.2% 0.016 84);    /* soft off-white cards */
  --text:             oklch(24% 0.026 288);
  --text-muted:       oklch(43% 0.03 288);
  --text-faint:       oklch(49% 0.03 288);
  --accent-primary:   oklch(52% 0.23 293);     /* #7C3AED family */
  --accent-secondary: oklch(50% 0.16 40);      /* burnt orange — AA on beige */
  --border:           oklch(30% 0.03 290 / .15);
  --border-2:         oklch(30% 0.03 290 / .22);
  --border-3:         oklch(30% 0.03 290 / .32);
  --glow:             oklch(52% 0.23 293 / .12);

  --on-accent:           oklch(98% 0.006 84);
  --on-accent-secondary: oklch(98% 0.006 84);

  --cta-hover: oklch(55% 0.17 42);

  --overlay:     oklch(93.5% 0.022 83 / .97);
  --overlay-nav: oklch(93.5% 0.022 83 / .90);

  --shadow-color:        oklch(35% 0.04 290 / .14);
  --shadow-color-strong: oklch(35% 0.04 290 / .20);

  --success: oklch(50% 0.14 155);
  --danger:  oklch(50% 0.19 27);
  --warning: oklch(55% 0.14 75);
  --info:    oklch(48% 0.14 245);

  --fx-aurora-1: 139 92 246;
  --fx-aurora-2: 249 115 22;
  --fx-aurora-3: 59 130 246;
  --fx-aurora-alpha: 0.30;
}

/* ── theme toggle control (shared by every nav) ─────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-3);
  background: color-mix(in oklab, var(--text) 6%, transparent);
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.nav-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.nav-ig:hover {
  color: var(--text);
  border-color: var(--border-3);
  background: color-mix(in oklab, var(--text) 6%, transparent);
}
.nav-ig svg { width: 17px; height: 17px; }
@media (max-width: 600px) { .nav-ig { width: 44px; height: 44px; } }

:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }

@media (max-width: 600px) {
  .theme-toggle { width: 44px; height: 44px; }
}

/* sRGB hex fallback for browsers without oklch() (pre-2023). Custom properties
   accept oklch() as a valid token, so a plain second declaration won't fall
   back — this @supports block is the reliable way to keep the palette readable.
   Translucent borders/glows (color-mix) degrade to their inherited value on
   these browsers, which is acceptable; text/bg/accent stay legible. */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --bg: #12171e;
    --bg-elevated: #1d232c;
    --surface: #161c24;
    --text: #f2f5f9;
    --text-muted: #a0a6ad;
    --text-faint: #8d939a;
    --accent-primary: #f89453;
    --accent-secondary: #f89453;
    --on-accent: #0d0502;
    --on-accent-secondary: #0d0502;
    --cta-hover: #ffa15a;
    --success: #43c07a;
    --danger: #f05751;
    --warning: #ffa700;
    --info: #249ff3;
    --border: rgba(255,255,255,.07);
    --border-2: rgba(255,255,255,.13);
    --border-3: rgba(255,255,255,.22);
    --glow: rgba(248,148,83,.12);
    --cta: #f89453;
    --on-cta: #0d0502;
    --accent: #f89453;
    --overlay: rgba(18,23,30,.97);
    --overlay-nav: rgba(18,23,30,.88);
    --shadow-color: rgba(0,0,0,.4);
    --shadow-color-strong: rgba(0,0,0,.6);
  }
  [data-theme="light"] {
    --bg: #f1e9d9;
    --bg-elevated: #e6ddcb;
    --surface: #f8f2e7;
    --text: #1e1d2b;
    --text-muted: #4f4d60;
    --text-faint: #5f5e71;
    --accent-primary: #753add;
    --accent-secondary: #aa3700;
    --on-accent: #faf8f4;
    --on-accent-secondary: #faf8f4;
    --cta-hover: #be4400;
    --success: #00793d;
    --danger: #b7191c;
    --warning: #a06200;
    --info: #0062a6;
    --border: rgba(43,37,64,.13);
    --border-2: rgba(43,37,64,.20);
    --border-3: rgba(43,37,64,.30);
    --glow: rgba(117,58,221,.12);
    --cta: #aa3700;
    --on-cta: #faf8f4;
    --accent: #753add;
    --overlay: rgba(241,233,217,.97);
    --overlay-nav: rgba(241,233,217,.90);
    --shadow-color: rgba(60,50,90,.14);
    --shadow-color-strong: rgba(60,50,90,.20);
  }
}