/* Five look-and-feel directions for BlynkAudit
 * Each direction defines tokens for both dark and light modes.
 * Swap the active direction with [data-dir="..."] on the root of a preview.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Serif:wght@400;500;600;700&display=swap");

/* ================================================================
 * 1 — TERMINAL (current / baseline)
 * true-black panels, electric cyan, mono-forward
 * ================================================================ */
[data-dir="terminal"][data-theme="dark"],
[data-dir="terminal"] {
  --color-bg:        #0B0B0B;
  --color-panel:     #0F0F10;
  --color-panel-2:   #121214;
  --color-hover:     rgba(255,255,255,0.03);
  --color-line:      rgba(255,255,255,0.08);
  --color-line-soft: rgba(255,255,255,0.05);
  --color-zebra:     rgba(255,255,255,0.02);
  --color-fg:        #ffffff;
  --color-muted:     rgba(255,255,255,0.55);
  --color-subtle:    rgba(255,255,255,0.35);
  --color-faint:     rgba(255,255,255,0.18);
  --color-accent:        #00D9FF;
  --color-accent-soft:   rgba(0,217,255,0.08);
  --color-accent-ring:   rgba(0,217,255,0.5);
  --color-accent-glow:   rgba(0,217,255,0.5);
  --color-accent-ink:    #00222b;
  --color-pos: #4ade80; --color-pos-glow: rgba(74,222,128,0.3);
  --color-warn: #fbbf24; --color-neg: #ff6b6b;
  --color-bar-bg: rgba(255,255,255,0.05);
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;
  --radius-card: 8px;
  --radius-btn: 4px;
  --hero-bg: radial-gradient(circle at 70% -10%, rgba(0,217,255,0.08), transparent 55%), var(--color-bg);
}
[data-dir="terminal"][data-theme="light"] {
  --color-bg:        #FAFAF7;
  --color-panel:     #FFFFFF;
  --color-panel-2:   #F4F4F0;
  --color-hover:     rgba(0,0,0,0.03);
  --color-line:      rgba(0,0,0,0.10);
  --color-line-soft: rgba(0,0,0,0.05);
  --color-zebra:     rgba(0,0,0,0.02);
  --color-fg:        #0B0B0B;
  --color-muted:     rgba(11,11,11,0.65);
  --color-subtle:    rgba(11,11,11,0.45);
  --color-faint:     rgba(11,11,11,0.22);
  --color-accent:        #007A99;
  --color-accent-soft:   rgba(0,122,153,0.08);
  --color-accent-ring:   rgba(0,122,153,0.4);
  --color-accent-glow:   rgba(0,122,153,0.2);
  --color-accent-ink:    #FFFFFF;
  --color-pos: #2F7D3E; --color-pos-glow: rgba(47,125,62,0.2);
  --color-warn: #B6832A; --color-neg: #B84A4A;
  --color-bar-bg: rgba(0,0,0,0.06);
  --hero-bg: radial-gradient(circle at 70% -10%, rgba(0,122,153,0.08), transparent 55%), var(--color-bg);
}

/* ================================================================
 * 2 — CHALK + INK (parchment light / charcoal dark)
 * warm, paper-like, editorial
 * ================================================================ */
[data-dir="chalk"][data-theme="light"],
[data-dir="chalk"] {
  --color-bg:        #F2ECDF;
  --color-panel:     #F8F3E7;
  --color-panel-2:   #EADFC8;
  --color-hover:     rgba(58,38,20,0.04);
  --color-line:      rgba(58,38,20,0.14);
  --color-line-soft: rgba(58,38,20,0.07);
  --color-zebra:     rgba(58,38,20,0.03);
  --color-fg:        #2A1E10;
  --color-muted:     rgba(42,30,16,0.65);
  --color-subtle:    rgba(42,30,16,0.45);
  --color-faint:     rgba(42,30,16,0.22);
  --color-accent:        #B8602A;
  --color-accent-soft:   rgba(184,96,42,0.10);
  --color-accent-ring:   rgba(184,96,42,0.45);
  --color-accent-glow:   rgba(184,96,42,0.30);
  --color-accent-ink:    #F8F3E7;
  --color-pos: #5E7A3A; --color-pos-glow: rgba(94,122,58,0.22);
  --color-warn: #C08A1E; --color-neg: #A83A28;
  --color-bar-bg: rgba(58,38,20,0.06);
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-serif: "Fraunces", Georgia, serif;
  --radius-card: 6px;
  --radius-btn: 4px;
  --hero-bg: radial-gradient(circle at 20% 0%, rgba(184,96,42,0.08), transparent 60%), var(--color-bg);
}
[data-dir="chalk"][data-theme="dark"] {
  --color-bg:        #1A1610;
  --color-panel:     #211C14;
  --color-panel-2:   #2A231A;
  --color-hover:     rgba(232,216,184,0.03);
  --color-line:      rgba(232,216,184,0.09);
  --color-line-soft: rgba(232,216,184,0.05);
  --color-zebra:     rgba(232,216,184,0.02);
  --color-fg:        #F2ECDF;
  --color-muted:     rgba(242,236,223,0.60);
  --color-subtle:    rgba(242,236,223,0.40);
  --color-faint:     rgba(242,236,223,0.20);
  --color-accent:        #E08A4A;
  --color-accent-soft:   rgba(224,138,74,0.10);
  --color-accent-ring:   rgba(224,138,74,0.5);
  --color-accent-glow:   rgba(224,138,74,0.35);
  --color-accent-ink:    #1A1610;
  --color-pos: #A0B872; --color-pos-glow: rgba(160,184,114,0.25);
  --color-warn: #E8BE55; --color-neg: #E87055;
  --color-bar-bg: rgba(242,236,223,0.05);
  --hero-bg: radial-gradient(circle at 20% 0%, rgba(224,138,74,0.12), transparent 60%), var(--color-bg);
}

/* ================================================================
 * 3 — EDITORIAL (research-report feel — serif display, high contrast)
 * Economist / FT / Pitchbook energy. Agentic readiness as THE thesis.
 * ================================================================ */
[data-dir="editorial"][data-theme="light"],
[data-dir="editorial"] {
  --color-bg:        #FDFBF5;
  --color-panel:     #FFFFFF;
  --color-panel-2:   #F4F1E8;
  --color-hover:     rgba(20,16,8,0.04);
  --color-line:      rgba(20,16,8,0.14);
  --color-line-soft: rgba(20,16,8,0.07);
  --color-zebra:     rgba(20,16,8,0.02);
  --color-fg:        #141008;
  --color-muted:     rgba(20,16,8,0.68);
  --color-subtle:    rgba(20,16,8,0.48);
  --color-faint:     rgba(20,16,8,0.25);
  --color-accent:        #C43838;
  --color-accent-soft:   rgba(196,56,56,0.08);
  --color-accent-ring:   rgba(196,56,56,0.4);
  --color-accent-glow:   rgba(196,56,56,0.25);
  --color-accent-ink:    #FFFFFF;
  --color-pos: #2F7D3E; --color-pos-glow: rgba(47,125,62,0.2);
  --color-warn: #A97B16; --color-neg: #C43838;
  --color-bar-bg: rgba(20,16,8,0.06);
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
  --font-serif:   "Inter", system-ui, sans-serif;
  --radius-card: 2px;
  --radius-btn: 2px;
  --hero-bg: var(--color-bg);
}
[data-dir="editorial"][data-theme="dark"] {
  --color-bg:        #0E0B07;
  --color-panel:     #161108;
  --color-panel-2:   #1F1810;
  --color-hover:     rgba(253,251,245,0.03);
  --color-line:      rgba(253,251,245,0.10);
  --color-line-soft: rgba(253,251,245,0.06);
  --color-zebra:     rgba(253,251,245,0.02);
  --color-fg:        #FDFBF5;
  --color-muted:     rgba(253,251,245,0.62);
  --color-subtle:    rgba(253,251,245,0.42);
  --color-faint:     rgba(253,251,245,0.22);
  --color-accent:        #E86050;
  --color-accent-soft:   rgba(232,96,80,0.10);
  --color-accent-ring:   rgba(232,96,80,0.5);
  --color-accent-glow:   rgba(232,96,80,0.3);
  --color-accent-ink:    #0E0B07;
  --color-pos: #78B06A; --color-pos-glow: rgba(120,176,106,0.25);
  --color-warn: #E8BE55; --color-neg: #E86050;
  --color-bar-bg: rgba(253,251,245,0.05);
  --hero-bg: var(--color-bg);
}

/* ================================================================
 * 4 — NEON (push the cyan harder, data-forward, graphical)
 * the brand dialed to 11 — gradient fields, radial glows
 * ================================================================ */
[data-dir="neon"][data-theme="dark"],
[data-dir="neon"] {
  --color-bg:        #05060A;
  --color-panel:     #0A0D16;
  --color-panel-2:   #0F1422;
  --color-hover:     rgba(120,200,255,0.04);
  --color-line:      rgba(120,200,255,0.10);
  --color-line-soft: rgba(120,200,255,0.06);
  --color-zebra:     rgba(120,200,255,0.02);
  --color-fg:        #EAF6FF;
  --color-muted:     rgba(234,246,255,0.60);
  --color-subtle:    rgba(234,246,255,0.40);
  --color-faint:     rgba(234,246,255,0.20);
  --color-accent:        #00E5FF;
  --color-accent-2:      #7B5CFF;
  --color-accent-soft:   rgba(0,229,255,0.10);
  --color-accent-ring:   rgba(0,229,255,0.5);
  --color-accent-glow:   rgba(0,229,255,0.6);
  --color-accent-ink:    #001018;
  --color-pos: #4EFFB0; --color-pos-glow: rgba(78,255,176,0.35);
  --color-warn: #FFC14D; --color-neg: #FF5C7A;
  --color-bar-bg: rgba(120,200,255,0.06);
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-serif: "Instrument Serif", Georgia, serif;
  --radius-card: 12px;
  --radius-btn: 8px;
  --hero-bg:
    radial-gradient(600px circle at 15% -10%, rgba(123,92,255,0.25), transparent 50%),
    radial-gradient(800px circle at 85% 0%, rgba(0,229,255,0.18), transparent 55%),
    var(--color-bg);
}
[data-dir="neon"][data-theme="light"] {
  --color-bg:        #F4F8FF;
  --color-panel:     #FFFFFF;
  --color-panel-2:   #EEF3FD;
  --color-hover:     rgba(30,60,120,0.04);
  --color-line:      rgba(30,60,120,0.12);
  --color-line-soft: rgba(30,60,120,0.06);
  --color-zebra:     rgba(30,60,120,0.025);
  --color-fg:        #0A1028;
  --color-muted:     rgba(10,16,40,0.65);
  --color-subtle:    rgba(10,16,40,0.45);
  --color-faint:     rgba(10,16,40,0.22);
  --color-accent:        #0071B8;
  --color-accent-2:      #5A40D9;
  --color-accent-soft:   rgba(0,113,184,0.10);
  --color-accent-ring:   rgba(0,113,184,0.4);
  --color-accent-glow:   rgba(0,113,184,0.25);
  --color-accent-ink:    #FFFFFF;
  --color-pos: #1F8F5E; --color-pos-glow: rgba(31,143,94,0.2);
  --color-warn: #B07A14; --color-neg: #C43850;
  --color-bar-bg: rgba(30,60,120,0.06);
  --hero-bg:
    radial-gradient(600px circle at 15% -10%, rgba(90,64,217,0.10), transparent 50%),
    radial-gradient(800px circle at 85% 0%, rgba(0,113,184,0.08), transparent 55%),
    var(--color-bg);
}

/* ================================================================
 * 5 — INSTITUTIONAL (calm, muted, CMO-friendly)
 * deep navy accent on soft greys. Least aggressive. McKinsey-core.
 * ================================================================ */
[data-dir="institutional"][data-theme="light"],
[data-dir="institutional"] {
  --color-bg:        #F5F5F3;
  --color-panel:     #FFFFFF;
  --color-panel-2:   #EBEBE7;
  --color-hover:     rgba(20,28,40,0.03);
  --color-line:      rgba(20,28,40,0.12);
  --color-line-soft: rgba(20,28,40,0.06);
  --color-zebra:     rgba(20,28,40,0.02);
  --color-fg:        #141C28;
  --color-muted:     rgba(20,28,40,0.65);
  --color-subtle:    rgba(20,28,40,0.45);
  --color-faint:     rgba(20,28,40,0.22);
  --color-accent:        #1B3A5C;
  --color-accent-soft:   rgba(27,58,92,0.08);
  --color-accent-ring:   rgba(27,58,92,0.35);
  --color-accent-glow:   rgba(27,58,92,0.18);
  --color-accent-ink:    #FFFFFF;
  --color-pos: #2B6B3E; --color-pos-glow: rgba(43,107,62,0.18);
  --color-warn: #A67616; --color-neg: #A83C2A;
  --color-bar-bg: rgba(20,28,40,0.06);
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 4px;
  --radius-btn: 2px;
  --hero-bg: var(--color-bg);
}
[data-dir="institutional"][data-theme="dark"] {
  --color-bg:        #0A1018;
  --color-panel:     #111823;
  --color-panel-2:   #18212E;
  --color-hover:     rgba(200,215,235,0.03);
  --color-line:      rgba(200,215,235,0.10);
  --color-line-soft: rgba(200,215,235,0.05);
  --color-zebra:     rgba(200,215,235,0.02);
  --color-fg:        #E8ECF2;
  --color-muted:     rgba(232,236,242,0.62);
  --color-subtle:    rgba(232,236,242,0.42);
  --color-faint:     rgba(232,236,242,0.22);
  --color-accent:        #7BA6D8;
  --color-accent-soft:   rgba(123,166,216,0.10);
  --color-accent-ring:   rgba(123,166,216,0.45);
  --color-accent-glow:   rgba(123,166,216,0.28);
  --color-accent-ink:    #0A1018;
  --color-pos: #6FB07A; --color-pos-glow: rgba(111,176,122,0.25);
  --color-warn: #D4A845; --color-neg: #D4705A;
  --color-bar-bg: rgba(200,215,235,0.05);
  --hero-bg: var(--color-bg);
}

/* ================================================================
 * 6 — SIGNATURE (the chosen hybrid)
 *   dark = Terminal (cyan on true black, Inter display)
 *   light = Chalk-and-ink palette, lightened background, Fraunces display
 * ================================================================ */
[data-dir="signature"][data-theme="dark"] {
  --color-bg:        #0B0B0B;
  --color-panel:     #0F0F10;
  --color-panel-2:   #121214;
  --color-hover:     rgba(255,255,255,0.03);
  --color-line:      rgba(255,255,255,0.08);
  --color-line-soft: rgba(255,255,255,0.05);
  --color-zebra:     rgba(255,255,255,0.02);
  --color-fg:        #ffffff;
  --color-muted:     rgba(255,255,255,0.55);
  --color-subtle:    rgba(255,255,255,0.35);
  --color-faint:     rgba(255,255,255,0.18);
  --color-accent:        #00D9FF;
  --color-accent-soft:   rgba(0,217,255,0.08);
  --color-accent-ring:   rgba(0,217,255,0.5);
  --color-accent-glow:   rgba(0,217,255,0.5);
  --color-accent-ink:    #00222b;
  --color-pos: #4ade80; --color-pos-glow: rgba(74,222,128,0.3);
  --color-warn: #fbbf24; --color-neg: #ff6b6b;
  --color-bar-bg: rgba(255,255,255,0.05);
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-serif:   "Inter", system-ui, sans-serif;
  --radius-card: 8px;
  --radius-btn: 4px;
  --hero-bg: radial-gradient(circle at 70% -10%, rgba(0,217,255,0.08), transparent 55%), var(--color-bg);
}
/* Light is the default (blynk_ rebrand). Bare `[data-dir="signature"]` no
 * longer falls back to dark — dark now requires the explicit
 * `data-theme="dark"` attribute (set by theme-toggle.js on opt-in). */
[data-dir="signature"][data-theme="light"],
[data-dir="signature"] {
  /* lightened chalk palette — warm cream bg, soft parchment panels */
  --color-bg:        #FBF7EC;
  --color-panel:     #FFFDF6;
  --color-panel-2:   #F4EEDC;
  --color-hover:     rgba(58,38,20,0.035);
  --color-line:      rgba(58,38,20,0.12);
  --color-line-soft: rgba(58,38,20,0.06);
  --color-zebra:     rgba(58,38,20,0.025);
  --color-fg:        #2A1E10;
  --color-muted:     rgba(42,30,16,0.65);
  --color-subtle:    rgba(42,30,16,0.45);
  --color-faint:     rgba(42,30,16,0.22);
  --color-accent:        #B8602A;
  --color-accent-soft:   rgba(184,96,42,0.10);
  --color-accent-ring:   rgba(184,96,42,0.45);
  --color-accent-glow:   rgba(184,96,42,0.28);
  --color-accent-ink:    #FFFDF6;
  --color-pos: #5E7A3A; --color-pos-glow: rgba(94,122,58,0.22);
  --color-warn: #C08A1E; --color-neg: #A83A28;
  --color-bar-bg: rgba(58,38,20,0.06);
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
  --font-serif:   "Inter", system-ui, sans-serif;
  --radius-card: 6px;
  --radius-btn: 4px;
  --hero-bg: radial-gradient(circle at 20% 0%, rgba(184,96,42,0.07), transparent 60%), var(--color-bg);
}

/* ================================================================
 * shared direction-agnostic stuff
 * ================================================================ */
[data-dir] {
  --font-size-xs:   10px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  26px;
  --font-size-3xl:  34px;
  --font-size-4xl:  44px;
  --font-size-5xl:  60px;
  --font-size-6xl:  88px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 28px; --space-7: 32px; --space-8: 48px;
  --space-9: 64px; --space-10: 96px;
  --motion-fast: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Layout constants */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --page-max: 1360px;
  /* Radius aliases for backward compat */
  --radius-1: 3px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-full: 9999px;
  /* Typography */
  --leading-body: 1.55;
  --leading-tight: 1.1;
  --tracking-snug: -0.4px;
  --tracking-tight: -1px;
  --tracking-label: 1.8px;
  --tracking-wide: 0.5px;
  /* Misc */
  --focus-ring: 2px solid var(--color-accent);
}