/* ════════════════════════════════════════
   GRIDLIGHT — DESIGN TOKEN SYSTEM
   Dark: "Arcane Observatory"  |  Light: "Illuminated Atlas"
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Dark theme tokens (default) ── */
:root, [data-theme="dark"] {
  --color-bg-primary:   #0F1217;
  --color-bg-panel:     #171B22;
  --color-bg-elevated:  #1E242D;

  --color-text-primary: #E6EDF3;
  --color-text-muted:   #9AA4B2;
  --color-text-faint:   rgba(230,237,243,0.3);

  --color-accent-primary:   #5AA9FF;
  --color-accent-secondary: #9F7AEA;
  --color-grid:             #4FD1C5;

  --color-success:  #48BB78;
  --color-warning:  #F6AD55;
  --color-danger:   #F56565;

  --color-border:      rgba(90,169,255,0.1);
  --color-border-h:    rgba(90,169,255,0.3);
  --color-surface-in:  0 0 0 1px rgba(255,255,255,0.03) inset;

  /* legacy aliases kept for JS refs */
  --gold:      #5AA9FF;
  --gold-light:#8EC8FF;
  --gold-dim:  #3A7EC4;
  --parchment: #E6EDF3;
  --ink:       #0F1217;
  --deep:      #0F1217;
  --panel:     #171B22;
  --panel2:    #1E242D;
  --panel3:    #242B36;
  --border:    rgba(90,169,255,0.1);
  --border-h:  rgba(90,169,255,0.3);
  --green:     #48BB78;
  --red:       #F56565;
  --blue:      #5AA9FF;
  --text-muted: #9AA4B2;
}

/* ── Light theme tokens ── */
[data-theme="light"], body.light-mode {
  --color-bg-primary:   #F6F7FB;
  --color-bg-panel:     #FFFFFF;
  --color-bg-elevated:  #E9EDF3;

  --color-text-primary: #1F2937;
  --color-text-muted:   #6B7280;
  --color-text-faint:   rgba(31,41,55,0.3);

  --color-accent-primary:   #3B82F6;
  --color-accent-secondary: #8B7CF6;
  --color-grid:             #4C8BF5;

  --color-success:  #22C55E;
  --color-warning:  #F59E0B;
  --color-danger:   #DC2626;

  --color-border:   rgba(59,130,246,0.15);
  --color-border-h: rgba(59,130,246,0.4);
  --color-surface-in: 0 2px 6px rgba(0,0,0,0.08);

  --gold:      #3B82F6;
  --gold-light:#60A5FA;
  --gold-dim:  #2563EB;
  --parchment: #1F2937;
  --ink:       #F6F7FB;
  --deep:      #F6F7FB;
  --panel:     #FFFFFF;
  --panel2:    #E9EDF3;
  --panel3:    #DDE3EC;
  --border:    rgba(59,130,246,0.15);
  --border-h:  rgba(59,130,246,0.4);
  --green:     #22C55E;
  --red:       #DC2626;
  --blue:      #3B82F6;
  --text-muted: #6B7280;
}

html, body {
  height: 100%; overflow: hidden;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  transition: background 0.15s, color 0.15s;
}