/* =========================================================================
   AKHA LABS — Website theme layer
   The whole site is ONE theme at a time (all-dark or all-light, never mixed).
   Sections alternate between --surface and --surface-alt — but both belong to
   the active theme. Dark surfaces are LIFTED with gradients (never flat black).
   ========================================================================= */

.site {
  background: var(--page-bg);
  color: var(--fg1);
  transition: background var(--dur-slow) var(--ease-out);
}

/* -------------------------------- DARK -------------------------------- */
.site.dark {
  --page-bg:     #0a0d13;
  /* lifted, never flat — each content surface has a soft gradient + bloom */
  --surface:     radial-gradient(130% 80% at 50% 0%, #161d2b 0%, #0e1320 52%, #0b0e16 100%);
  --surface-alt: radial-gradient(120% 90% at 82% 6%, #1a2433 0%, #11172300 55%), linear-gradient(180deg, #0f1420 0%, #0c1017 100%);

  /* ambient animated blooms over content sections */
  --bloom-warm: rgba(174,46,4,0.20);
  --bloom-cool: rgba(141,220,241,0.10);
  --hero-bg:     #0a0d13;
  --hero-blooms: radial-gradient(72% 56% at 78% 86%, rgba(174,46,4,0.34) 0%, transparent 50%),
                 radial-gradient(58% 55% at 15% 12%, rgba(141,220,241,0.20) 0%, transparent 52%),
                 radial-gradient(130% 95% at 50% 122%, rgba(47,64,89,0.65) 0%, transparent 60%);

  --fg1: #f6f9f9;
  --fg2: rgba(246,249,249,0.72);
  --fg3: rgba(246,249,249,0.50);

  --card-bg:     linear-gradient(180deg, #1b2330 0%, #131a27 100%);
  --card-border: rgba(255,255,255,0.10);
  --hairline:    rgba(255,255,255,0.12);
  --rule:        rgba(255,255,255,0.85);

  /* neutral, high-contrast primary button (leans into neutrals); SKY is the accent */
  --btn-bg: var(--paper);    --btn-fg: #0a0d13;   --btn-hover: #ffffff;  --btn-press: #e4ebed;
  --btn-outline: rgba(255,255,255,0.30); --btn-outline-fg: #f6f9f9;
  --accent-text: var(--sky);
  --eyebrow: var(--sky);
  --serif-accent: var(--sky);
  --tag-bg: rgba(141,220,241,0.12); --tag-fg: #bfeaf6;

  --nav-bg: rgba(10,13,19,0.55); --nav-bg-scroll: rgba(10,13,19,0.82); --nav-border: rgba(255,255,255,0.10);
  --logo: url('assets/logo-wordmark-white.svg');
  --logomark: url('assets/logomark-white.svg');
  --feat-glow: 0 18px 60px rgba(141,220,241,0.16);
}

/* -------------------------------- LIGHT ------------------------------- */
.site.light {
  --page-bg:     #f4f7f9;
  --surface:     linear-gradient(180deg, #ffffff 0%, #f3f7f9 100%);
  --surface-alt: linear-gradient(180deg, #eef3f6 0%, #e6edf2 100%);

  /* ambient animated blooms over content sections */
  --bloom-warm: rgba(174,46,4,0.07);
  --bloom-cool: rgba(141,220,241,0.28);
  --hero-bg:     #eef3f7;
  --hero-blooms: radial-gradient(72% 56% at 80% 88%, rgba(174,46,4,0.13) 0%, transparent 52%),
                 radial-gradient(58% 55% at 14% 10%, rgba(47,64,89,0.10) 0%, transparent 55%),
                 radial-gradient(130% 95% at 50% 122%, rgba(141,220,241,0.45) 0%, transparent 62%);

  --fg1: var(--ink);
  --fg2: var(--slate-700);
  --fg3: var(--n-500);

  --card-bg:     #ffffff;
  --card-border: var(--border);
  --hairline:    var(--border);
  --rule:        var(--ink);

  /* neutral, high-contrast primary button (ink on paper); BRICK is the accent */
  --btn-bg: var(--ink);       --btn-fg: #f6f9f9;  --btn-hover: #1b2330;  --btn-press: #000;
  --btn-outline: var(--ink);  --btn-outline-fg: var(--ink);
  --accent-text: var(--brick);
  --eyebrow: var(--brick);
  --serif-accent: var(--brick);
  --tag-bg: var(--brick-50); --tag-fg: var(--brick-700);

  --nav-bg: rgba(255,255,255,0.62); --nav-bg-scroll: rgba(255,255,255,0.86); --nav-border: rgba(9,10,16,0.08);
  --logo: url('assets/logo-wordmark-black.svg');
  --logomark: url('assets/logomark-black.svg');
  --feat-glow: 0 18px 50px rgba(174,46,4,0.18);
}