/* ============================================================
   markdown-delight — theme layer
   Token-driven theming, ported from the IMT PM engine and upgraded to the
   IMT Field-Terminal CRT spec (imt-project-managmenet hacker-theme.css):
   curved-monitor corner falloff, phosphor bloom, scanlines, flicker, and
   the slow tracking band — all expressed as tier-3 dials.

   Three tiers:
     1. --theme-*   : seed-derived palette, written by theme-engine.js (HSL math)
     2. semantic    : --bg/--surface/--text/--accent... mapped per [data-theme]
     3. effect      : the CRT "dial" — every theme drives the SAME overlay
                      engine (workspace.css), just with different dial values.
   Switching = swap one attribute. No re-render.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  /* ---- UI scale (driven by the scale slider) ---- */
  --ui-scale: 1;
  --ui-scale-inverse: 1;

  /* ---- seed-derived palette (theme-engine.js overwrites these) ---- */
  --theme-accent: #00783c;
  --theme-accent-rgb: 0 120 60;
  --theme-accent-strong: #4fca4f;
  --theme-accent-muted: #3f9963;
  --theme-accent-dark: #1c401c;
  --theme-accent-ink: #04140a;
  --theme-complement: #67e8f9;
  --theme-complement-rgb: 103 232 249;
  --theme-field: #9db86d;
  --theme-field-rgb: 157 184 109;
  --theme-warm: #f5c542;
  --theme-warm-rgb: 245 197 66;

  /* ---- semantic defaults (quiet-command / light) ---- */
  --bg:            #f3f6f9;
  --surface:       #ffffff;
  --surface-alt:   #f7f9fc;
  --panel:         #ffffff;
  --border:        #d9e1ea;
  --border-strong: #c2ccd8;
  --text:          #101828;
  --text-muted:    #667085;
  --text-faint:    #98a2b3;
  --accent:        #2f6fdd;
  --accent-strong: #1e57c0;
  --accent-soft:   rgb(47 111 221 / .12);
  --warn:          #d97706;
  --danger:        #dc2626;

  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Berkeley Mono', ui-monospace, monospace;
  --font-size: 16px;

  --radius:        8px;
  --radius-sm:     5px;
  --shadow-panel:  0 1px 3px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .06);

  /* ============================================================
     effect dial — the CRT engine (workspace.css overlays read ONLY these).
     0 everywhere = a flat, effect-free screen. Themes turn the screen on.
     ============================================================ */
  --phosphor-rgb: var(--theme-accent-rgb, 0 255 156);

  /* glass layer (body::before): curvature + bloom + scanlines */
  --crt-opacity:        0;      /* master opacity of the glass layer            */
  --crt-corner:         0;      /* corner falloff (the curved-monitor illusion)  */
  --crt-mid:            0;      /* mid-field darkening of the vignette           */
  --crt-bloom:          0;      /* center phosphor bloom strength                */
  --crt-scan-dark:      0;      /* scanline darkness (1px per 4px)               */
  --crt-inset-1:        0;      /* inset shadow: tight corner shading            */
  --crt-inset-2:        0;      /* inset shadow: wide corner shading             */
  --crt-inset-glow:     0;      /* inset shadow: phosphor edge glow              */
  --crt-flicker-anim:   none;   /* set to the flicker animation to enable       */

  /* tracking band (body::after): the slow rolling refresh bar */
  --crt-track-opacity:  0;
  --crt-track-anim:     none;
  --crt-track-resting:  34vh;   /* park position when animation is off          */

  /* element-level effects */
  --glow-radius:        0px;    /* accent glow on chrome (borders, brand, dots) */
  --phosphor-text-glow: none;   /* per-glyph glow (hacker only — costly)        */
  --panel-filter:       none;   /* contrast/saturate pop on chrome panels       */

  /* ============================================================
     THE HOUSING — the solid frame around the tubes (topbar, tabs, pane
     heads, gutters, splitters). A smooth REFLECTIVE surface in the
     COMPLEMENT colour (green phosphor → purple shell, cyan → orange),
     with the screens' phosphor UNDERGLOW bleeding into it.
     ============================================================ */
  --frame-accent:      var(--theme-complement, #67e8f9);
  --frame-accent-rgb:  var(--theme-complement-rgb, 103 232 249);
  --frame-bg:          var(--surface);      /* quiet default: plain housing */
  --frame-bg-deep:     var(--surface-alt);
  --frame-border:      var(--border);
  --frame-text:        var(--text-muted);
  --frame-text-faint:  var(--text-faint);
  --frame-gloss:       0;                   /* specular sheen strength       */
  --frame-underglow:   0;                   /* phosphor bleed into the shell */
}

/* ============================================================
   quiet-command — calm light theme (screen off)
   ============================================================ */
html[data-theme="quiet-command"] {
  color-scheme: light;
  --accent:        var(--theme-accent, #2f6fdd);
  --accent-strong: var(--theme-accent-strong, #1e57c0);
  --accent-soft:   rgb(var(--theme-accent-rgb, 47 111 221) / .12);
}

/* ============================================================
   field-command — muted dark olive (low glow, faint glass)
   ============================================================ */
html[data-theme="field-command"] {
  color-scheme: dark;
  --bg:            #14160f;
  --surface:       #1b1e15;
  --surface-alt:   #20241a;
  --panel:         #1d2117;
  --border:        rgb(var(--theme-accent-rgb, 143 168 95) / .26);
  --border-strong: rgb(var(--theme-accent-rgb, 143 168 95) / .46);
  --text:          #e7ecd9;
  --text-muted:    rgb(var(--theme-accent-rgb, 143 168 95) / .72);
  --text-faint:    rgb(var(--theme-accent-rgb, 143 168 95) / .44);
  --accent:        var(--theme-accent, #8fa85f);
  --accent-strong: var(--theme-accent-strong, #b6cf86);
  --accent-soft:   rgb(var(--theme-accent-rgb, 143 168 95) / .14);
  --warn:          var(--theme-warm, #f5c542);
  --shadow-panel:  0 0 0 1px rgb(var(--theme-accent-rgb, 143 168 95) / .10), 0 14px 34px rgb(0 0 0 / .6);
  --font:          var(--font-mono);

  --crt-opacity:    .30;
  --crt-corner:     .34;
  --crt-mid:        .08;
  --crt-bloom:      .05;
  --crt-scan-dark:  .16;
  --crt-inset-1:    .30;
  --crt-inset-2:    .18;
  --glow-radius:    6px;

  --frame-bg:        color-mix(in srgb, var(--frame-accent) 8%, #0f0d12);
  --frame-bg-deep:   color-mix(in srgb, var(--frame-accent) 5%, #0a090d);
  --frame-border:    rgb(var(--frame-accent-rgb) / .26);
  --frame-text:      color-mix(in srgb, var(--frame-accent) 45%, #cbc6d2);
  --frame-text-faint: rgb(var(--frame-accent-rgb) / .42);
  --frame-gloss:     .05;
  --frame-underglow: .14;
}

/* ============================================================
   tactical-overdrive — high-contrast cyan command deck
   ============================================================ */
html[data-theme="tactical-overdrive"] {
  color-scheme: dark;
  --bg:            #06090d;
  --surface:       #0a1018;
  --surface-alt:   #0e1622;
  --panel:         #0c131d;
  --border:        rgb(var(--theme-accent-rgb, 49 215 255) / .30);
  --border-strong: rgb(var(--theme-accent-rgb, 49 215 255) / .55);
  --text:          #dff6ff;
  --text-muted:    rgb(var(--theme-accent-rgb, 49 215 255) / .74);
  --text-faint:    rgb(var(--theme-accent-rgb, 49 215 255) / .44);
  --accent:        var(--theme-accent, #31d7ff);
  --accent-strong: var(--theme-accent-strong, #91f6ff);
  --accent-soft:   rgb(var(--theme-accent-rgb, 49 215 255) / .14);
  --warn:          var(--theme-warm, #ff9b45);
  --shadow-panel:  0 0 0 1px rgb(var(--theme-accent-rgb, 49 215 255) / .14), 0 18px 46px rgb(0 0 0 / .72);
  --font:          var(--font-mono);

  --crt-opacity:    .50;
  --crt-corner:     .55;
  --crt-mid:        .12;
  --crt-bloom:      .10;
  --crt-scan-dark:  .26;
  --crt-inset-1:    .50;
  --crt-inset-2:    .30;
  --crt-inset-glow: .04;
  --crt-track-opacity: .22;
  --crt-track-anim: md-crt-tracking 9s linear infinite;
  --glow-radius:    10px;
  --panel-filter:   contrast(1.03) saturate(1.05);

  /* cyan phosphor → warm orange shell */
  --frame-bg:        color-mix(in srgb, var(--frame-accent) 12%, #120b06);
  --frame-bg-deep:   color-mix(in srgb, var(--frame-accent) 8%, #0c0804);
  --frame-border:    rgb(var(--frame-accent-rgb) / .32);
  --frame-text:      color-mix(in srgb, var(--frame-accent) 55%, #e0d2c2);
  --frame-text-faint: rgb(var(--frame-accent-rgb) / .46);
  --frame-gloss:     .08;
  --frame-underglow: .22;
}

/* ============================================================
   hacker — phosphor green Field Terminal (the hero; full IMT CRT spec)
   ============================================================ */
html[data-theme="hacker"] {
  color-scheme: dark;
  --hacker-depth:   color-mix(in srgb, var(--theme-accent-dark, #1c401c) 36%, #020403);
  --hacker-depth-2: color-mix(in srgb, var(--theme-accent-dark, #1c401c) 42%, #050706);
  --hacker-surface: color-mix(in srgb, var(--theme-accent-dark, #1c401c) 34%, #08100d);
  --hacker-panel:   color-mix(in srgb, var(--theme-accent-dark, #1c401c) 29%, rgb(8 15 12 / .88));

  --bg:            var(--hacker-depth);
  --surface:       var(--hacker-surface);
  --surface-alt:   color-mix(in srgb, var(--theme-accent-dark, #1c401c) 44%, #0b1410);
  --panel:         var(--hacker-panel);
  --border:        rgb(var(--theme-accent-rgb, 0 120 60) / .26);
  --border-strong: rgb(var(--theme-accent-rgb, 0 120 60) / .52);
  --text:          color-mix(in srgb, var(--theme-accent-strong, #4fca4f) 38%, #f1fff8);
  --text-muted:    rgb(var(--theme-accent-rgb, 0 120 60) / .70);
  --text-faint:    rgb(var(--theme-accent-rgb, 0 120 60) / .42);
  --accent:        var(--theme-accent, #00783c);
  --accent-strong: var(--theme-accent-strong, #4fca4f);
  --accent-soft:   rgb(var(--theme-accent-rgb, 0 120 60) / .12);
  --warn:          var(--theme-warm, #f5c542);
  --danger:        #ff4444;
  --shadow-panel:  0 0 22px rgb(var(--theme-accent-rgb, 0 120 60) / .10), 0 24px 60px rgb(0 0 0 / .86);

  /* the Field Terminal face: VT323 phosphor tube */
  --font:          'VT323', var(--font-mono);
  --font-size:     18px;

  /* full CRT spec (values lifted verbatim from hacker-theme.css §CRT layer) */
  --crt-opacity:    .78;
  --crt-corner:     .82;
  --crt-mid:        .18;
  --crt-bloom:      .18;
  --crt-scan-dark:  .44;
  --crt-inset-1:    .78;
  --crt-inset-2:    .56;
  --crt-inset-glow: .06;
  --crt-flicker-anim: md-crt-flicker 5.6s steps(5, end) infinite;
  --crt-track-opacity: .46;
  --crt-track-anim: md-crt-tracking 7s linear infinite;
  --glow-radius:    9px;
  --phosphor-text-glow: 0 0 5px rgb(var(--phosphor-rgb) / .24);
  --panel-filter:   contrast(1.04) saturate(1.08);

  /* green phosphor → glossy purple shell (the PM-Assistant sub-terminal look) */
  --frame-bg:        color-mix(in srgb, var(--frame-accent) 14%, #0c0712);
  --frame-bg-deep:   color-mix(in srgb, var(--frame-accent) 9%, #070409);
  --frame-border:    rgb(var(--frame-accent-rgb) / .36);
  --frame-text:      color-mix(in srgb, var(--frame-accent) 58%, #d8cfe4);
  --frame-text-faint: rgb(var(--frame-accent-rgb) / .48);
  --frame-gloss:     .10;
  --frame-underglow: .28;
}

html[data-theme="hacker"] *,
html[data-theme="hacker"] *::before,
html[data-theme="hacker"] *::after { letter-spacing: 0 !important; }

/* Phosphor bloom on the backdrop — the room light sits up-left, like a
   window over the operator's shoulder (composited gradients, never repaint) */
html[data-theme="hacker"] body { background:
    radial-gradient(ellipse 46rem 30rem at 18% -10%, rgb(var(--theme-accent-rgb, 0 255 156) / .16), transparent 80%),
    radial-gradient(circle at 12% 8%, rgb(245 197 66 / .07), transparent 24rem),
    linear-gradient(118deg, var(--hacker-depth-2) 0, var(--hacker-depth) 100%); }

html[data-theme="tactical-overdrive"] body { background:
    radial-gradient(ellipse 44rem 28rem at 18% -10%, rgb(var(--theme-accent-rgb, 49 215 255) / .14), transparent 80%),
    linear-gradient(118deg, #080d13 0, var(--bg) 100%); }

/* ============================================================
   FIREFOX PERF (ported from the spec verbatim): Firefox re-blurs
   per-glyph text-shadows every repaint and composites animated
   full-screen overlays poorly. Strip the continuous costs there.
   ============================================================ */
@supports (-moz-appearance: none) {
  html[data-theme="hacker"] body,
  html[data-theme="hacker"] body * { text-shadow: none !important; }
  html[data-theme] { --crt-flicker-anim: none; --crt-track-anim: none; --panel-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] { --crt-flicker-anim: none; --crt-track-anim: none; }
}