/* PYTHON//30 themes. Dark-first; protocol amber + teal accents.
   Tokens are the design contract — components use vars, never raw hex.
   Accessibility audit: every text/background token pair used for body or
   UI text measures ≥ 4.5:1 in all four themes (WCAG AA).

   Two token tiers:
   1. Core tokens (--bg … --terminal-text) — the original contract.
   2. Effect tokens — glows, panel gradients, shadows, background
      atmosphere, button gradient stops. Every decorative effect in
      app.css is driven by these, so each theme tunes (or disarms —
      see high-contrast) the entire visual layer without touching
      component CSS. */

[data-theme="protocol-dark"] {
  --bg: #0e1218;
  --surface: #151b24;
  --surface-2: #1b2330;
  --border: #2a3444;
  --text: #e6e9ee;
  --muted: #9aa7b8;       /* 7.1:1 on --surface */
  --accent: #f2a33c;      /* protocol amber */
  --accent-2: #3fb8a5;    /* teal */
  --success: #4cc38a;
  --danger: #e5604f;
  --info: #5b9bd5;
  --accent-contrast: #131a12;  /* 8.5:1 on --accent */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --terminal-bg: #0a0e14;
  --terminal-text: #e6e9ee;

  /* effect tokens */
  --glow-accent: rgba(242, 163, 60, 0.32);
  --glow-accent-2: rgba(63, 184, 165, 0.30);
  --glow-success: rgba(76, 195, 138, 0.30);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.40), 0 20px 48px -18px rgba(0, 0, 0, 0.65);
  --panel-a: rgba(26, 33, 45, 0.92);
  --panel-b: rgba(17, 22, 31, 0.88);
  --edge: rgba(255, 255, 255, 0.07);
  --bg-fx-1: rgba(242, 163, 60, 0.09);
  --bg-fx-2: rgba(63, 184, 165, 0.08);
  --grid-line: rgba(154, 167, 184, 0.05);
  --noise-op: 0.05;
  --accent-hi: #ffbc59;
  --accent-lo: #e08f22;
  --teal-hi: #4fd0bb;
  --teal-lo: #2e9c8b;
  --scanline: rgba(255, 255, 255, 0.028);
  --term-glow: rgba(230, 233, 238, 0.22);
  --nav-bg: rgba(14, 18, 24, 0.78);
}

[data-theme="clean-light"] {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eceff4;
  --border: #c2ccd8;
  --text: #1c2330;
  --muted: #5b6779;       /* 5.7:1 on --surface */
  --accent: #7a520e;      /* 6.9:1 on white */
  --accent-2: #14695c;    /* 6.6:1 on white */
  --success: #146c43;     /* 6.5:1 on white */
  --danger: #cf3f2e;      /* 4.8:1 on white */
  --info: #2f6fb3;        /* 4.8:1 on white */
  --accent-contrast: #ffffff;  /* 6.9:1 on --accent */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --terminal-bg: #10151d;   /* terminal stays dark for code legibility */
  --terminal-text: #e6e9ee;

  /* effect tokens — soft neutral depth, faint warm atmosphere */
  --glow-accent: rgba(122, 82, 14, 0.16);
  --glow-accent-2: rgba(20, 105, 92, 0.15);
  --glow-success: rgba(20, 108, 67, 0.16);
  --shadow-1: 0 1px 2px rgba(28, 35, 48, 0.07), 0 10px 28px -14px rgba(28, 35, 48, 0.16);
  --shadow-2: 0 2px 6px rgba(28, 35, 48, 0.08), 0 20px 48px -18px rgba(28, 35, 48, 0.24);
  --panel-a: rgba(255, 255, 255, 0.92);
  --panel-b: rgba(249, 250, 252, 0.88);
  --edge: rgba(255, 255, 255, 0.90);
  --bg-fx-1: rgba(242, 163, 60, 0.08);
  --bg-fx-2: rgba(63, 184, 165, 0.07);
  --grid-line: rgba(28, 35, 48, 0.045);
  --noise-op: 0.03;
  --accent-hi: #8a5e12;
  --accent-lo: #64430a;
  --teal-hi: #187a6b;
  --teal-lo: #10564b;
  --scanline: rgba(255, 255, 255, 0.03);
  --term-glow: rgba(230, 233, 238, 0.18);
  --nav-bg: rgba(244, 246, 249, 0.80);
}

[data-theme="midnight"] {
  --bg: #070b14;
  --surface: #0d1420;
  --surface-2: #131c2c;
  --border: #223047;
  --text: #dbe4f2;
  --muted: #8b9bb5;       /* 7.0:1 on --bg */
  --accent: #e8b54d;
  --accent-2: #46c2ae;
  --success: #4cc38a;
  --danger: #e5604f;
  --info: #6aa8e0;
  --accent-contrast: #0a0f18;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --terminal-bg: #05080f;
  --terminal-text: #dbe4f2;

  /* effect tokens — deeper blue, stronger teal aurora */
  --glow-accent: rgba(232, 181, 77, 0.30);
  --glow-accent-2: rgba(70, 194, 174, 0.32);
  --glow-success: rgba(76, 195, 138, 0.30);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px -14px rgba(0, 0, 0, 0.65);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.50), 0 20px 48px -18px rgba(0, 0, 0, 0.75);
  --panel-a: rgba(17, 24, 38, 0.92);
  --panel-b: rgba(10, 16, 27, 0.88);
  --edge: rgba(255, 255, 255, 0.06);
  --bg-fx-1: rgba(232, 181, 77, 0.08);
  --bg-fx-2: rgba(70, 194, 174, 0.10);
  --grid-line: rgba(139, 155, 181, 0.05);
  --noise-op: 0.05;
  --accent-hi: #f5c766;
  --accent-lo: #d69e33;
  --teal-hi: #58d4bf;
  --teal-lo: #33a390;
  --scanline: rgba(255, 255, 255, 0.026);
  --term-glow: rgba(219, 228, 242, 0.22);
  --nav-bg: rgba(7, 11, 20, 0.78);
}

[data-theme="high-contrast"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #161616;
  --border: #9a9a9a;      /* thick, bright borders (see app.css overrides) */
  --text: #ffffff;
  --muted: #d0d0d0;       /* 13.6:1 on black */
  --accent: #ffc53d;
  --accent-2: #4de3cc;
  --success: #5eead4;
  --danger: #ff6b5e;
  --info: #82c3ff;
  --accent-contrast: #000000;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --terminal-bg: #000000;
  --terminal-text: #ffffff;

  /* effect tokens — fully disarmed: no glows, no gradients, no texture.
     Flat surfaces + thick borders carry all structure. */
  --glow-accent: transparent;
  --glow-accent-2: transparent;
  --glow-success: transparent;
  --shadow-1: none;
  --shadow-2: none;
  --panel-a: #0a0a0a;
  --panel-b: #0a0a0a;
  --edge: transparent;
  --bg-fx-1: transparent;
  --bg-fx-2: transparent;
  --grid-line: transparent;
  --noise-op: 0;
  --accent-hi: #ffc53d;
  --accent-lo: #ffc53d;
  --teal-hi: #4de3cc;
  --teal-lo: #4de3cc;
  --scanline: transparent;
  --term-glow: transparent;
  --nav-bg: #000000;
}