/* ============================================================
   Ai-Revolution — Semantic theme tokens
   :root            → LIGHT theme (default)
   [data-theme=dark]/.theme-dark → DARK theme
   prefers-color-scheme handled for unset roots at the bottom.
   ALWAYS ship both — the brand is dual-mode by design.
   ============================================================ */
:root,
[data-theme="light"],
.theme-light {
  color-scheme: light;

  /* Page & surfaces */
  --bg:            #E9EDF3;                /* sampled light bg base */
  --bg-image:      url("/assets/backgrounds/bg-light.png");
  --surface:       #FFFFFF;
  --surface-2:     #F4F6FA;
  --surface-3:     #EBEEF4;
  --surface-sunken:#E2E7EF;
  --on-brand:      #FFFFFF;               /* text on brand fills */

  /* Text */
  --text:          #14171E;
  --text-muted:    #525B68;
  --text-subtle:   #828B98;
  --text-on-glass: #14171E;
  --heading:       #0F141E;
  --link:          #1670C4;
  --link-hover:    #135FA8;

  /* Accent (text/icons). Buttons use --gradient-brand. */
  --accent:        #1D84DF;
  --accent-quiet:  #EAF4FC;               /* tinted accent surface */
  --accent-strong: #135FA8;

  /* Borders & dividers */
  --border:        rgba(20, 23, 30, 0.10);
  --border-strong: rgba(20, 23, 30, 0.16);
  --divider:       rgba(20, 23, 30, 0.08);

  /* Inputs */
  --field-bg:      #FFFFFF;
  --field-border:  rgba(20, 23, 30, 0.16);
  --field-placeholder: #9AA6B6;

  /* Status (carry tinted bg) */
  --success: var(--green-500); --success-bg: var(--green-bg);
  --warning: var(--amber-500); --warning-bg: var(--amber-bg);
  --danger:  var(--red-500);   --danger-bg:  var(--red-bg);

  /* Headline gradient text default */
  --gradient-text: var(--gradient-text-light);
}

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

  --bg:            #04050A;                /* sampled dark bg base */
  --bg-image:      url("/assets/backgrounds/bg-dark.png");
  --surface:       #0F141E;
  --surface-2:     #141A26;
  --surface-3:     #1A2230;
  --surface-sunken:#090C13;

  /* Brand gradient glows lighter on dark (the A-mark crossbar on dark).
     Text on brand fills flips to deep navy to stay legible. */
  --gradient-brand:     var(--gradient-brand-glow);
  --gradient-brand-135: var(--gradient-brand-glow-135);
  --on-brand:      #0A3358;

  --text:          #EDF1F7;
  --text-muted:    #9AA6B6;
  --text-subtle:   #6B7686;
  --text-on-glass: #EDF1F7;
  --heading:       #F4F8FF;
  --link:          #7EC6FD;
  --link-hover:    #A9E9FD;

  --accent:        #7EC6FD;               /* sky reads better on dark */
  --accent-quiet:  rgba(126, 198, 253, 0.12);
  --accent-strong: #A9E9FD;

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --divider:       rgba(255, 255, 255, 0.08);

  --field-bg:      rgba(255, 255, 255, 0.04);
  --field-border:  rgba(255, 255, 255, 0.18);
  --field-placeholder: #6B7686;

  --success-bg: rgba(31, 169, 113, 0.16);
  --warning-bg: rgba(232, 151, 59, 0.16);
  --danger-bg:  rgba(229, 72, 77, 0.16);

  --gradient-text: var(--gradient-text-dark);

  /* ---- Liquid glass: dark recipe ---- */
  --hairline:        rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  --glass-tint:        rgba(22, 30, 45, 0.46);
  --glass-tint-strong: rgba(22, 30, 45, 0.64);
  --glass-tint-faint:  rgba(22, 30, 45, 0.28);
  --glass-edge:        rgba(255, 255, 255, 0.22);
  --glass-edge-low:    rgba(255, 255, 255, 0.04);

  --glass-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);

  --glass-sheen:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0) 100%); /* @kind other */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 22px 60px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 40px 100px rgba(0, 0, 0, 0.7);

  --glow-brand:      0 0 0 4px rgba(126, 198, 253, 0.22);
  --focus-ring:      0 0 0 3px rgba(126, 198, 253, 0.5);
}

/* Honor OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #04050A;
    --bg-image: url("/assets/backgrounds/bg-dark.png");
    --surface: #0F141E; --surface-2: #141A26; --surface-3: #1A2230; --surface-sunken:#090C13;
    --text: #EDF1F7; --text-muted: #9AA6B6; --text-subtle: #6B7686; --text-on-glass:#EDF1F7;
    --heading: #F4F8FF; --link:#7EC6FD; --link-hover:#A9E9FD;
    --accent:#7EC6FD; --accent-quiet:rgba(126,198,253,0.12); --accent-strong:#A9E9FD;
    --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.18); --divider:rgba(255,255,255,0.08);
    --field-bg:rgba(255,255,255,0.04); --field-border:rgba(255,255,255,0.18); --field-placeholder:#6B7686;
    --gradient-brand: var(--gradient-brand-glow); --gradient-brand-135: var(--gradient-brand-glow-135); --on-brand:#0A3358;
    --gradient-text: var(--gradient-text-dark);
    --hairline:rgba(255,255,255,0.10); --hairline-strong:rgba(255,255,255,0.18);
    --glass-tint:rgba(22,30,45,0.46); --glass-tint-strong:rgba(22,30,45,0.64); --glass-tint-faint:rgba(22,30,45,0.28);
    --glass-edge:rgba(255,255,255,0.22); --glass-edge-low:rgba(255,255,255,0.04);
    --glass-shadow:0 16px 48px rgba(0,0,0,0.55),0 2px 10px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 1px rgba(0,0,0,0.3);
    --glass-sheen:linear-gradient(180deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.03) 40%,rgba(255,255,255,0) 100%); /* @kind other */
  }
}