:root {
  --theme-bg: #070b14;
  --theme-bg-secondary: #0b1220;
  --theme-bg-tertiary: #101827;
  --theme-surface: #111a29;
  --theme-surface-elevated: #172236;
  /* Nada paling gelap dari keluarga surface. Dipakai untuk dasar kontrol
     dan tepi modal yang dulu dipaku rgba(7, 11, 20, ...). */
  --theme-surface-deep: #070b14;
  --theme-surface-soft: rgba(23, 34, 54, .74);
  --theme-primary: #d6ad52;
  --theme-primary-light: #f0cf78;
  --theme-primary-bright: #f5d98c;
  --theme-primary-dark: #9b762d;
  --theme-primary-soft: rgba(214, 173, 82, .14);
  --theme-secondary: #278cff;
  --theme-secondary-light: #44b7ff;
  --theme-secondary-soft: rgba(39, 140, 255, .12);
  --theme-accent: #44b7ff;
  --theme-accent-soft: rgba(68, 183, 255, .12);
  --theme-text: #fffaf0;
  --theme-text-secondary: #c8c0ad;
  --theme-text-muted: #8e96a7;
  --theme-border: rgba(155, 166, 190, .18);
  --theme-border-strong: rgba(214, 173, 82, .35);
  --theme-border-accent: rgba(39, 140, 255, .26);
  --theme-glow-primary: rgba(214, 173, 82, .14);
  --theme-glow-secondary: rgba(39, 140, 255, .10);
  --theme-body-gradient: radial-gradient(circle at 18% 8%, rgba(214,173,82,.10), transparent 30%), radial-gradient(circle at 82% 16%, rgba(39,140,255,.08), transparent 26%), linear-gradient(180deg, #070b14 0%, #0a1120 100%);
  --theme-grid-line-primary: rgba(240, 207, 120, .018);
  --theme-grid-line-secondary: rgba(39, 140, 255, .018);
  --theme-header-bg: rgba(7, 11, 20, .72);
  --theme-header-bg-scrolled: rgba(7, 11, 20, .96);
  --theme-hero-bg: linear-gradient(145deg, rgba(17,26,41,.88), rgba(7,11,20,.72));
  --theme-section-bg: color-mix(in srgb, var(--theme-surface) 66%, transparent);
  --theme-games-bg: linear-gradient(180deg,
    color-mix(in srgb, var(--theme-surface-deep) 18%, transparent),
    color-mix(in srgb, var(--theme-surface) 74%, transparent));
  /* Diturunkan dari --theme-surface, tidak lagi dipaku navy. Sebelumnya
     --theme-surface sudah bertema per WLB (maroon untuk SLG, ungu untuk SE8)
     tapi kartu ini melewatinya sama sekali, jadi panel PROVIDER CONNECTED
     tetap navy di semua tema. Sekarang tema baru ikut tanpa menambah satu
     baris pun di themes.css. */
  --theme-card-bg: linear-gradient(150deg,
    color-mix(in srgb, var(--theme-surface-elevated) 94%, transparent),
    color-mix(in srgb, var(--theme-surface) 98%, transparent));
  --theme-control-bg: color-mix(in srgb, var(--theme-surface-deep) 74%, transparent);
  --theme-control-bg-focus: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  --theme-focus-shadow: 0 0 0 3px var(--theme-primary-soft), 0 0 14px var(--theme-secondary-soft);
  --theme-title-gradient: linear-gradient(100deg, var(--theme-primary-dark) 0%, var(--theme-primary) 28%, var(--theme-text) 50%, var(--theme-primary-light) 58%, var(--theme-primary) 76%, var(--theme-primary-dark) 100%);
  --theme-section-title-gradient: linear-gradient(90deg, var(--theme-primary-dark) 0%, var(--theme-primary) 30%, var(--theme-primary-bright) 52%, var(--theme-primary) 75%, var(--theme-primary-dark) 100%);
  --theme-accent-line-gradient: linear-gradient(90deg, var(--theme-primary-dark), var(--theme-primary-light), var(--theme-secondary));
  --theme-nav-accent: var(--theme-primary-light);
  --theme-button-start: var(--theme-primary-dark);
  --theme-button-mid: var(--theme-primary);
  --theme-button-end: var(--theme-primary-light);
  --theme-button-text: var(--theme-bg);
  --theme-provider-active: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary), var(--theme-primary-light));
  --theme-provider-active-text: var(--theme-button-text);
  --theme-provider-hover-shadow: 0 8px 20px var(--theme-glow-primary);
  --theme-running-text-bg: linear-gradient(100deg, rgba(17,26,41,.92), rgba(214,173,82,.07), rgba(17,26,41,.92));
  --theme-progress-track: rgba(255, 255, 255, .07);
  --theme-ai-panel-bg: radial-gradient(circle at 50% 38%, var(--theme-secondary-soft), transparent 34%), linear-gradient(155deg, var(--theme-surface-elevated), var(--theme-bg-secondary));
  --theme-ai-panel-glow: 0 0 34px var(--theme-glow-secondary), 0 0 26px var(--theme-glow-primary);
  --theme-ai-stroke-1: rgba(59, 130, 246, .72);
  --theme-ai-stroke-2: rgba(56, 189, 248, .95);
  --theme-ai-stroke-3: rgba(240, 207, 120, .72);
  --theme-thumb-a: #123b5e;
  --theme-thumb-b: #091524;
  --theme-thumb-glow: rgba(39, 140, 255, .18);
  --theme-modal-bg: linear-gradient(150deg,
    color-mix(in srgb, var(--theme-surface-elevated) 99%, transparent),
    color-mix(in srgb, var(--theme-surface-deep) 99%, transparent) 68%);
  --theme-modal-surface: color-mix(in srgb, var(--theme-surface-elevated) 48%, transparent);
  --theme-modal-surface-strong: color-mix(in srgb, var(--theme-surface) 88%, transparent);
  --theme-modal-shimmer: rgba(240,207,120,.12);
  --theme-disclaimer-bg: rgba(214,173,82,.045);

  --color-bg-primary: var(--theme-bg);
  --color-bg-secondary: var(--theme-bg-secondary);
  --color-bg-tertiary: var(--theme-bg-tertiary);
  --color-surface: var(--theme-surface);
  --color-surface-elevated: var(--theme-surface-elevated);
  --color-surface-soft: var(--theme-surface-soft);
  --color-gold-primary: var(--theme-primary);
  --color-gold-light: var(--theme-primary-light);
  --color-gold-bright: var(--theme-primary-bright);
  --color-gold-dark: var(--theme-primary-dark);
  --color-gold-soft: var(--theme-primary-soft);
  --color-blue-accent: var(--theme-secondary);
  --color-blue-light: var(--theme-secondary-light);
  --color-blue-soft: var(--theme-secondary-soft);
  --color-cyan-accent: var(--theme-accent);
  --color-text-primary: var(--theme-text);
  --color-text-secondary: var(--theme-text-secondary);
  --color-text-muted: var(--theme-text-muted);
  --color-border: var(--theme-border);
  --color-border-gold: var(--theme-border-strong);
  --color-border-blue: var(--theme-border-accent);
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, .30);
  --shadow-gold: 0 0 28px var(--theme-glow-primary);
  --shadow-blue: 0 0 20px var(--theme-glow-secondary);
  --duration-fast: 180ms;
  --duration-normal: 260ms;
  --duration-reveal: 480ms;
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --bg: var(--color-bg-primary);
  --bg-soft: var(--color-bg-secondary);
  --surface: var(--color-surface-soft);
  --surface-solid: var(--color-surface);
  --surface-light: var(--color-surface-elevated);
  --border: var(--color-border);
  --border-strong: var(--color-border-gold);
  --text: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --color-gold: var(--color-gold-primary);
  --color-electric-blue: var(--color-blue-accent);
  --color-electric-blue-light: var(--color-blue-light);
  --blue: var(--color-blue-accent);
  --cyan: var(--color-cyan-accent);
  --gold: var(--color-gold);
  --gold-light: var(--color-gold-light);
  --green: var(--color-success);
  --danger: var(--color-danger);
  --shadow: var(--shadow-soft);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --container: 1200px;
  --header-height: 72px;
  --transition: var(--duration-fast) ease;
}

[data-theme="navy_gold"] {
  --theme-title-gradient: linear-gradient(100deg, #9b762d 0%, #d6ad52 30%, #f0cf78 54%, #d6ad52 76%, #9b762d 100%);
  --theme-section-title-gradient: linear-gradient(90deg, #9b762d 0%, #d6ad52 34%, #f5d98c 58%, #d6ad52 78%, #9b762d 100%);
}