/* The only home of color literals. See Doc/Styling.md. */

/* 1. Theme primitives */

/* Dark (default) */
:root,
:root[data-theme="dark"] {
  --bg: #0f1115;
  --bg-2: #161922;
  --panel: #1a1e29;
  --border: #2a2f3d;
  --border-strong: #3a4156;
  --fg: #e8eaed;
  --muted: #8b94a8;
  --accent: #7aa2f7;
  --accent-2: #5b8aef;
  --on-accent: #0b1020;
  --ok: #6ee7a7;
  --ok-bg: #143424;
  --no: #ff7a85;
  --no-bg: #3a1418;
  --on-no: #ffffff;
  --warn: #f0b400;
  --on-warn: #1a1d24;
  --code-bg: #0c0f15;
  --code-fg: #e8eaed;
  /* Inline <code> pills in prose. */
  --inline-code-bg: var(--code-bg);
  --inline-code-fg: var(--code-fg);
  --inline-code-border: transparent;
  /* Syntax tokens follow the page palette unless a theme overrides. */
  --code-token-comment:  var(--muted);
  --code-token-keyword:  var(--accent);
  --code-token-number:   var(--warn);
  --code-token-string:   var(--ok);
  --code-token-function: var(--code-fg);
  --diff-beginner: #6ee7a7;
  --diff-intermediate: #7aa2f7;
  --diff-advanced: #f0a060;
  --diff-expert: #ff7a85;
  --mastered: #d4af37;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --radius: 10px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Activity heatmaps; tier 0 uses --bg/--border-strong. */
  --heat-1: #14422a;
  --heat-2: #1f6e3f;
  --heat-3: #2eaa5e;
  --heat-4: #4ed87f;
}

/* Terminal green */
:root[data-theme="terminal-green"] {
  --bg: #000000;
  --bg-2: #050a05;
  --panel: #0a140a;
  --border: #144914;
  --border-strong: #1f6f1f;
  --fg: #4cff4c;
  --muted: #2db82d;
  --accent: #66ff66;
  --accent-2: #99ff99;
  --on-accent: #000000;
  --ok: #66ff66;
  --ok-bg: #002a00;
  --no: #ff6666;
  --no-bg: #2a0000;
  --on-no: #000000;
  --warn: #ffff66;
  --on-warn: #000000;
  --code-bg: #000000;
  --code-fg: #66ff66;
  --code-token-keyword:  #aaffaa;
  --code-token-string:   #33ee44;
  --diff-beginner: #66ff66;
  --diff-intermediate: #66ffff;
  --diff-advanced: #ffcc66;
  --diff-expert: #ff6666;
  --mastered: #e6ffe6;
  --shadow: 0 0 0 1px rgba(102,255,102,.08) inset,
            0 0 8px rgba(102,255,102,.12);
  --radius: 0;
  --font-body: 'Terminal Pixel', VT323, 'Cascadia Mono',
               Consolas, Menlo, 'DejaVu Sans Mono', monospace;
  --heat-1: #103b10;
  --heat-2: #1f6f1f;
  --heat-3: #2db82d;
  --heat-4: #66ff66;
}

/* Terminal amber */
:root[data-theme="terminal-amber"] {
  --bg: #000000;
  --bg-2: #0a0700;
  --panel: #140e00;
  --border: #4d2f00;
  --border-strong: #7a4d00;
  --fg: #ffb000;
  --muted: #cc8800;
  --accent: #ffd24d;
  --accent-2: #ffe599;
  --on-accent: #1a0d00;
  --ok: #66ff66;
  --ok-bg: #0a2a00;
  --no: #ff6666;
  --no-bg: #2a0000;
  --on-no: #000000;
  --warn: #ffff66;
  --on-warn: #000000;
  --code-bg: #000000;
  --code-fg: #ffd24d;
  --code-token-keyword:  #ffec99;
  --code-token-string:   #ffaa44;
  --diff-beginner: #ffe599;
  --diff-intermediate: #ffd24d;
  --diff-advanced: #ff9933;
  --diff-expert: #ff6666;
  --mastered: #fff0c2;
  --shadow: 0 0 0 1px rgba(255,176,0,.08) inset,
            0 0 8px rgba(255,176,0,.14);
  --radius: 0;
  --font-body: 'Terminal Pixel', VT323, 'Cascadia Mono',
               Consolas, Menlo, 'DejaVu Sans Mono', monospace;
  --heat-1: #4d2f00;
  --heat-2: #7a4d00;
  --heat-3: #cc8800;
  --heat-4: #ffd24d;
}

/* Solarized dark, brightened text and a darker background. */
:root[data-theme="solarized-dark"] {
  --bg: #001e26;
  --bg-2: #073642;
  --panel: #0e4250;
  --border: #1e4f5b;
  --border-strong: #3a7280;
  --fg: #cad7d7;
  --muted: #819595;
  --accent: #5ab8e8;
  --accent-2: #3697d0;
  --on-accent: #001e26;
  --ok: #93b900;
  --ok-bg: #143625;
  --no: #e84a45;
  --no-bg: #3a1115;
  --on-no: #ffffff;
  --warn: #cba000;
  --on-warn: #001e26;
  --code-bg: #001218;
  --code-fg: #cad7d7;
  --diff-beginner: #93b900;
  --diff-intermediate: #5ab8e8;
  --diff-advanced: #d56524;
  --diff-expert: #e84a45;
  --mastered: #d33682;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
  --radius: 6px;
}

/* Light */
:root[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-2: #eef0f6;
  --panel: #ffffff;
  --border: #d8dde7;
  --border-strong: #b9c0cf;
  --fg: #1a1d24;
  --muted: #5b6373;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --on-accent: #ffffff;
  --ok: #12834a;
  --ok-bg: #d6f3df;
  --no: #c4262e;
  --no-bg: #fde0e2;
  --on-no: #ffffff;
  --warn: #b45309;
  --on-warn: #ffffff;
  --code-bg: #f1f3f5;
  --code-fg: #1a1d24;
  --inline-code-border: var(--border);
  --code-token-comment:  #6b7280;
  --code-token-keyword:  #1d4ed8;
  --code-token-number:   #9a3412;
  --code-token-string:   #15803d;
  --code-token-function: #1a1d24;
  --diff-beginner: #0f7d3f;
  --diff-intermediate: #1e5cb8;
  --diff-advanced: #c2410c;
  --diff-expert: #b91c1c;
  --mastered: #a5801a;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(0,0,0,.06);
  --heat-1: #9be9a8;
  --heat-2: #40c463;
  --heat-3: #30a14e;
  --heat-4: #216e39;
}

/* Sepia */
:root[data-theme="sepia"] {
  --bg: #f5ecd7;
  --bg-2: #ece1c6;
  --panel: #fbf4e1;
  --border: #c8b894;
  --border-strong: #a3956f;
  --fg: #3d2f1a;
  --muted: #7a6849;
  --accent: #8a5a2b;
  --accent-2: #6b4422;
  --on-accent: #fbf4e1;
  --ok: #2f6b2a;
  --ok-bg: #dbe8c8;
  --no: #a93429;
  --no-bg: #f1d3cd;
  --on-no: #fbf4e1;
  --warn: #966a17;
  --on-warn: #fbf4e1;
  --code-bg: #2a2418;
  --code-fg: #f0e6d0;
  --inline-code-bg: #d8c8a3;
  --inline-code-fg: var(--fg);
  --code-token-comment:  #b09a72;
  --code-token-keyword:  #e6b87a;
  --code-token-number:   #f0c360;
  --code-token-string:   #c8d588;
  --code-token-function: #f0e6d0;
  --diff-beginner: #5d7c2a;
  --diff-intermediate: #3d6b7a;
  --diff-advanced: #a25c1a;
  --diff-expert: #933325;
  --mastered: #8a6d1a;
  --shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 2px rgba(0,0,0,.08);
  --heat-1: #9be9a8;
  --heat-2: #40c463;
  --heat-3: #30a14e;
  --heat-4: #216e39;
}

/* 2. Semantic tokens */

:root {
  /* Leitner state on every surface. */
  --bucket-wrong: var(--no);
  --bucket-review: var(--accent);
  --bucket-mastered: var(--mastered);
  --bucket-unseen: var(--border-strong);

  /* Mastery chart ramp ends: box 1 to the top box. */
  --mband-lo: var(--no);
  --mband-hi: var(--ok);

  /* Achievement tiers. */
  --tier-bronze: #b06a2a;
  --tier-silver: #9aa6b8;
  --tier-gold: var(--mastered);
  --tier-mythic: #c46df0;

  /* Search-hit highlight (<mark>). */
  --mark-bg: color-mix(in srgb, var(--warn) 35%, transparent);

  /* Modal backdrop; floating-panel shadow. */
  --backdrop: rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 4px 14px rgba(0, 0, 0, 0.35);

  /* Letterbox behind render canvases; black on every theme. */
  --canvas-void: #000000;

  /* Console SGR hues, mixed toward --code-fg. */
  --ansi-red: #dc143c;
  --ansi-green: #2e8b57;
  --ansi-yellow: #daa520;
  --ansi-blue: #4682b4;
  --ansi-magenta: #da70d6;
  --ansi-cyan: #008080;
  --ansi-black: #000000;
}

/* Per-theme chart ramps. */
:root[data-theme="terminal-green"] { --mband-lo: #1f5a1f; --mband-hi: #9dff9d; }
:root[data-theme="terminal-amber"] { --mband-lo: #6e4500; --mband-hi: #ffd98a; }
:root[data-theme="sepia"]          { --mband-lo: #c98f4f; --mband-hi: #4a2c0e; }
:root[data-theme="solarized-dark"] { --mband-lo: #dc322f; --mband-hi: #2aa198; }