/* ==========================================================================
   SlicePost Design V2 — shared visual foundation
   Manrope / #1014EF electric blue / #181D21 slate / near-black framing
   ==========================================================================

   STRUCTURE (consolidated V2 stylesheet set, load in this order AFTER the
   template's inline <style>, so the V2 system wins the cascade):

     1. site-v2.css            tokens + theme system + base elements (this file)
     2. site-v2-components.css header, nav, panels, cards, buttons, inputs
     3. site-v2-extras.css     page polish, marketing surfaces, reduced motion

   THEME CONTRACT: the runtime (site-v2.js, loaded on every route) owns the
   theme decision. It sets `data-theme="dark"|"light"` on <html> and mirrors
   it into `color-scheme`. This file defines BOTH palettes: :root is the
   dark theme (default), html[data-theme="light"] overrides every token.
   No other file hardcodes theme colors — components always consume tokens.

   SHARED TOKENS (used by all three files):
     --v2-*        raw V2 palette (flips per theme)
     --v2-fill     subtle surface fill (inputs, chips, quiet panels)
     --v2-fill-hover  hover/inset fill
     --v2-header-bg   sticky header surface
     --v2-scrim       modal/dialog backdrop
     --v2-card-shadow, --v2-btn-glow  controlled elevation per theme
     --bg-color / --panel-bg / --border-color / --text-main / --text-muted /
     --accent-*   legacy dashboard tokens (templates keep using them)
     --bg / --panel / --text / --brand / --zinc-* / --indigo-* / --emerald-300 /
     --amber-300 / --red-300   legacy posting-page aliases
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — DARK theme (default)
   -------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* ---- V2 palette (DESIGNV2.md) ---- */
    --v2-ink: #050505;            /* deepest page framing */
    --v2-slate: #181D21;          /* dark panel/surface family */
    --v2-slate-2: #20262B;        /* raised surface */
    --v2-slate-3: #262C32;        /* hover / inset */
    --v2-border: rgba(255, 255, 255, 0.075);
    --v2-border-strong: rgba(255, 255, 255, 0.14);
    --v2-blue: #1014EF;           /* brand primary — electric blue */
    --v2-blue-light: #93ACFF;     /* readable blue text / focus */
    --v2-blue-hover: #2429FF;     /* filled control hover */
    --v2-blue-deep: #0202CC;      /* pressed */
    --v2-blue-data: #2F74C9;      /* active/info data accent */
    --v2-green: #27C58B;          /* positive / success */
    --v2-red: #F36B76;            /* negative / error */
    --v2-amber: #F2B84B;          /* caution / schedule */
    --v2-teal: #28A894;           /* secondary data */
    --v2-purple: var(--v2-blue);  /* legacy alias; interface accents stay blue */
    --v2-white: #F1F4F7;          /* primary text on dark */
    --v2-muted: #9DA6AF;          /* secondary text */
    --v2-dim: #64707B;            /* tertiary / metadata */
    --v2-paper: #F6F8FA;          /* light-mode framing */
    --v2-paper-panel: #FFFFFF;
    --v2-paper-steel: #E9EDF1;
    --v2-paper-text: #131619;
    --v2-paper-muted: #5A6470;

    /* ---- shared surface/elevation tokens ---- */
    --v2-fill: rgba(255, 255, 255, 0.035);
    --v2-fill-hover: rgba(255, 255, 255, 0.06);
    --v2-header-bg: rgba(5, 5, 5, 0.82);
    --v2-scrim: rgba(5, 5, 5, 0.72);
    --v2-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.35);
    --v2-btn-glow: rgba(16, 20, 239, 0.35);

    /* ---- map legacy dashboard tokens to V2 (both templates use these) ---- */
    --bg-color: var(--v2-ink);
    --panel-bg: rgba(24, 29, 33, 0.72);
    --border-color: var(--v2-border);
    --primary-gradient: linear-gradient(135deg, #1014EF 0%, #2F2FFF 55%, #4C4CFF 100%);
    --accent-gradient: linear-gradient(135deg, #1014EF 0%, #2F74C9 100%);
    --text-main: var(--v2-white);
    --text-muted: var(--v2-muted);
    --accent-cyan: var(--v2-blue-light);
    --accent-purple: var(--v2-purple);
    --accent-green: var(--v2-green);

    /* ---- legacy posting-page aliases ---- */
    --bg: var(--bg-color);
    --header-border: var(--border-color);
    --panel: var(--panel-bg);
    --text: var(--text-main);
    --brand: var(--v2-blue);
    --brand-light: var(--v2-blue-light);
    --brand-deep: var(--v2-blue-deep);
    --indigo-600: var(--v2-blue-data);
    --indigo-500: var(--v2-blue-data);
    --indigo-400: var(--v2-blue-light);
    --zinc-950: rgba(255, 255, 255, 0.05);
    --zinc-900: rgba(24, 29, 33, 0.72);
    --zinc-800: rgba(255, 255, 255, 0.09);
    --zinc-700: rgba(255, 255, 255, 0.17);
    --zinc-600: #6B7280;
    --zinc-500: #8B93A1;
    --zinc-400: #9CA3AF;
    --zinc-300: #D1D5DB;
    --emerald-300: #6EE7B7;
    --amber-300: #FCD34D;
    --red-300: #FCA5A5;

    /* ---- radii ---- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 18px;
}

/* --------------------------------------------------------------------------
   2. LIGHT theme — html[data-theme="light"] (set by site-v2.js)
   Every token above is flipped for white/slate-gray surfaces with WCAG AA
   contrast for text. Brand blue is unchanged; tints of green/red/amber/teal
   deepen so text and status marks stay legible on white.
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
    color-scheme: light;

    --v2-ink: #F6F8FA;
    --v2-slate: #FFFFFF;
    --v2-slate-2: #FFFFFF;
    --v2-slate-3: #E9EDF1;
    --v2-border: rgba(16, 22, 30, 0.10);
    --v2-border-strong: rgba(16, 22, 30, 0.18);
    --v2-blue: #1014EF;
    --v2-blue-light: #1E5BA8;     /* readable blue on light surfaces */
    --v2-blue-deep: #0202CC;
    --v2-blue-data: #1E5BA8;      /* AA on white (~6.7:1) */
    --v2-green: #0B7A54;          /* AA on white (~5.3:1) */
    --v2-red: #C93A45;            /* AA on white (~5:1) */
    --v2-amber: #B45309;          /* AA on white (~4.9:1) */
    --v2-teal: #0F766E;           /* AA on white (~4.8:1) */
    --v2-purple: var(--v2-blue);  /* legacy alias; interface accents stay blue */
    --v2-white: #131619;          /* primary text */
    --v2-muted: #4B5560;          /* AA on white (~7.6:1) */
    --v2-dim: #5A6470;            /* AA on white (~5.4:1) */
    --v2-paper: #F6F8FA;
    --v2-paper-panel: #FFFFFF;
    --v2-paper-steel: #E9EDF1;
    --v2-paper-text: #131619;
    --v2-paper-muted: #5A6470;

    --v2-fill: rgba(16, 22, 30, 0.045);
    --v2-fill-hover: rgba(16, 22, 30, 0.08);
    --v2-header-bg: rgba(255, 255, 255, 0.85);
    --v2-scrim: rgba(16, 22, 30, 0.45);
    --v2-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 28px rgba(16, 22, 30, 0.10);
    --v2-btn-glow: rgba(16, 20, 239, 0.22);

    --bg-color: var(--v2-paper);
    --panel-bg: rgba(255, 255, 255, 0.88);
    --border-color: var(--v2-border);
    --primary-gradient: linear-gradient(135deg, #1014EF 0%, #2F2FFF 55%, #4C4CFF 100%);
    --accent-gradient: linear-gradient(135deg, #1014EF 0%, #1E5BA8 100%);
    --text-main: var(--v2-white);
    --text-muted: var(--v2-muted);
    --accent-cyan: var(--v2-blue-light);
    --accent-purple: var(--v2-purple);
    --accent-green: var(--v2-green);

    --bg: var(--bg-color);
    --header-border: var(--border-color);
    --panel: var(--panel-bg);
    --text: var(--text-main);
    --brand: var(--v2-blue);
    --brand-light: var(--v2-blue-light);
    --brand-deep: var(--v2-blue-deep);
    --indigo-600: var(--v2-blue-data);
    --indigo-500: var(--v2-blue-data);
    --indigo-400: var(--v2-blue-light);
    --zinc-950: #FFFFFF;
    --zinc-900: #F8FAFC;
    --zinc-800: rgba(16, 22, 30, 0.10);
    --zinc-700: rgba(16, 22, 30, 0.16);
    --zinc-600: #5A6470;
    --zinc-500: #4B5560;
    --zinc-400: #374151;
    --zinc-300: #1F2937;
    --emerald-300: #0B7A54;
    --amber-300: #B45309;
    --red-300: #C93A45;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', system-ui, sans-serif;
}

body {
    background-color: var(--v2-ink);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(16, 20, 239, 0.055) 0%, transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(47, 116, 201, 0.05) 0%, transparent 40%);
    color: var(--v2-white);
    letter-spacing: -0.005em;
    /* beats template-level `body { font-family: Outfit }` rules (equal
       specificity, loaded later) so every route gets the V2 typeface */
    font-family: 'Manrope', system-ui, sans-serif;
}

::selection { background: rgba(16, 20, 239, 0.45); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    border: 2px solid var(--v2-ink);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(16, 22, 30, 0.18);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 22, 30, 0.30);
}

/* ---- typography helpers ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: var(--v2-white);
    color: var(--v2-white);
}

.logo-badge {
    background: var(--v2-blue);
    box-shadow: none;
    letter-spacing: 0.08em;
}

/* mono stays mono */
.mono, .console-title, .console-output, .range-value, .music-duration-badge,
.time-badge, .range-time-value, #scrub-time-current, #scrub-time-total,
[class*="timecode"], code, kbd, samp {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
