/* ============================================================
   OBSIDIAN LAKE — COLORS & TYPOGRAPHY
   ============================================================
   Counter-surveillance tools & training.
   Aesthetic: late-80s/early-90s action cinema × cypherpunk.
   Dark, technical, neon-trimmed. Built for low-light operators.
   ============================================================ */

/* ---------- Fonts ----------
   Neoneon        → BRAND FONT — wordmark + hero only (local .otf)
   Anton          → workhorse display / poster / titles (cinematic, condensed)
   Smooch         → script accent — taglines, slogans, graffiti overlays (local .ttf)
   JetBrains Mono → BODY — paragraphs, UI, labels, code (local variable .ttf)
                    The same family does body and mono labels; the brand
                    is intentionally typeset like a cypherpunk manifesto.
   VT323          → CRT terminal readouts, status badges, sparingly
*/

/* Local brand fonts */
@font-face {
  font-family: "Neoneon";
  src: url("fonts/Neoneon-3zaD6.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Smooch";
  src: url("fonts/Smooch-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* Display + terminal faces — self-hosted (were Google Fonts @import). */
@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("fonts/VT323-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — OBSIDIAN CORE
     The base. Deep purple-black like volcanic glass at the bottom
     of a Highland loch. These are the canvas of every screen.
     ============================================================ */
  --obsidian-void:    #07040E;   /* near-black, true page bg */
  --obsidian-abyss:   #0F0820;   /* surface 0 */
  --obsidian-deep:    #1A0E2E;   /* surface 1 (cards) */
  --obsidian-mid:     #2A1B47;   /* surface 2 (raised) */
  --obsidian-rise:    #3B2A60;   /* surface 3 (popovers) */
  --obsidian-fog:     #4C3A78;   /* dividers, hairlines */

  /* ============================================================
     COLOR — LOCH
     The water. Cold navy/teal. Used as a secondary surface tone
     and for "depth" — anything submerged, encrypted, or hidden.
     ============================================================ */
  --loch-deep:        #0B1530;
  --loch-mid:         #14233F;
  --loch-surface:     #1F3556;
  --loch-mist:        #2E5C7E;
  --loch-foam:        #8FAFC4;

  /* ============================================================
     COLOR — NEON (the action-movie trim)
     Use SPARINGLY. One neon per surface. Glow lives on
     edges, lines, focus rings, and the logo — never on body copy.
     ============================================================ */
  --neon-magenta:     #FF2BD6;   /* primary neon. logo glow. */
  --neon-magenta-soft:#C81FA8;
  --neon-violet:      #9B5BFF;   /* secondary neon. hover/focus. */
  --neon-cyan:        #2BE5FF;   /* tertiary. data / telemetry. */
  --neon-amber:       #F4B942;   /* the moon. warmth / highlight. */

  /* ============================================================
     COLOR — SUNSET & NVG  (added to match the wolf-operator badge)
     The badge's sun burns orange at the core and bleeds to a hot
     red horizon before the magenta edge takes over. Use the gradient
     for "sun/moon" blooms behind hero art and section corners.
     NVG green is the night-vision goggle glow — an acid telemetry
     accent. Use it RARELY: a single live indicator, never body copy.
     ============================================================ */
  --sunset-core:      #FF7A1A;   /* hot orange — sun center */
  --sunset-mid:       #FF2E5B;   /* the burn — sun-to-horizon */
  --sunset-edge:      #C81FA8;   /* magenta horizon, ties to neon edge */
  --gradient-sunset:  radial-gradient(circle at 50% 38%, var(--sunset-core) 0%, var(--sunset-mid) 42%, var(--sunset-edge) 72%, transparent 100%);
  --nvg-green:        #6CFF3A;   /* night-vision acid green */

  --sunset-core-rgb:  255, 122, 26; /* @kind color */
  --sunset-mid-rgb:   255, 46, 91; /* @kind color */
  --nvg-green-rgb:    108, 255, 58; /* @kind color */

  /* ============================================================
     COLOR — STATUS
     Operational signals. Designed to read at 3 ft on a dark
     room screen.
     ============================================================ */
  --signal-ok:        #00FF85;   /* terminal green — "clear" */
  --signal-warn:      #FFB627;   /* amber — "monitor" */
  --signal-alert:     #FF3344;   /* red — "compromised" */
  --signal-info:      #2BE5FF;   /* cyan — "data" */

  /* ============================================================
     COLOR — FOREGROUND (Text / Ink)
     Bone, never pure white. White on obsidian is hostile to eyes.
     ============================================================ */
  --fg-1:             #F2ECDD;   /* bone — primary text */
  --fg-2:             #BFB7A6;   /* warm gray — secondary */
  --fg-3:             #807865;   /* muted — captions, meta */
  --fg-4:             #4F4A3F;   /* placeholder, disabled */
  --fg-inverse:       #07040E;   /* on neon / bone bg */

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  --bg:               var(--obsidian-void);
  --bg-elev-1:        var(--obsidian-abyss);
  --bg-elev-2:        var(--obsidian-deep);
  --bg-elev-3:        var(--obsidian-mid);
  --border:           var(--obsidian-fog);
  --border-strong:    var(--neon-violet);
  --accent:           var(--neon-magenta);
  --accent-2:         var(--neon-cyan);
  --highlight:        var(--neon-amber);

  /* ============================================================
     TYPE — FAMILIES
     ============================================================ */
  --font-brand:       "Neoneon", "Anton", "Bebas Neue", "Impact", sans-serif;
  --font-display:     "Anton", "Bebas Neue", "Impact", sans-serif;
  --font-script:      "Smooch", "Caveat", "Brush Script MT", cursive;
  --font-body:        "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;
  --font-mono:        "JetBrains Mono", "SF Mono", "Menlo", monospace;
  --font-terminal:    "VT323", "JetBrains Mono", monospace;

  /* ============================================================
     TYPE — SCALE
     Display sizes lean BIG. This is action-movie typography.
     ============================================================ */
  --fs-display-xl:    96px;
  --fs-display-l:     72px;
  --fs-display-m:     56px;
  --fs-h1:            44px;
  --fs-h2:            32px;
  --fs-h3:            24px;
  --fs-h4:            20px;
  --fs-body-l:        18px;
  --fs-body:          16px;
  --fs-body-s:        14px;
  --fs-caption:       12px;
  --fs-micro:         11px;

  /* ============================================================
     TYPE — LINE HEIGHT / TRACKING
     ============================================================ */
  --lh-tight:         0.95; /* @kind font */
  --lh-snug:          1.2; /* @kind font */
  --lh-body:          1.65; /* @kind font */
  --lh-loose:         1.85; /* @kind font */

  --tracking-display: -0.01em; /* @kind font */
  --tracking-tight:   -0.02em; /* @kind font */
  --tracking-normal:  0em; /* @kind font */
  --tracking-wide:    0.08em; /* @kind font */
  --tracking-wider:   0.16em; /* @kind font */
  --tracking-widest:  0.28em;  /* "OBSIDIAN LAKE" lockup, status pills @kind font */

  /* ============================================================
     SPACING — based on 4px grid
     ============================================================ */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;

  /* ============================================================
     RADII — mostly sharp. We are not Bubble Tech, Inc.
     ============================================================ */
  --radius-0:         0px;     /* default — military, sharp */
  --radius-1:         2px;     /* inputs */
  --radius-2:         4px;     /* small chips */
  --radius-3:         8px;     /* cards (use sparingly) */
  --radius-pill:      999px;   /* status pills only */

  /* ============================================================
     SHADOWS & GLOWS
     The brand's signature is NEON GLOW, not soft drop shadow.
     Use box-shadow for glow, not depth.
     ============================================================ */
  --shadow-card:      0 2px 0 0 var(--obsidian-void), 0 0 0 1px var(--obsidian-fog);
  --shadow-raised:    0 4px 24px -8px rgba(0,0,0,0.8), 0 0 0 1px var(--obsidian-fog);
  --glow-magenta-sm:  0 0 8px rgba(255,43,214,0.5), 0 0 16px rgba(255,43,214,0.25);
  --glow-magenta:     0 0 12px rgba(255,43,214,0.7), 0 0 32px rgba(255,43,214,0.35), 0 0 64px rgba(255,43,214,0.15);
  --glow-cyan:        0 0 12px rgba(43,229,255,0.7), 0 0 32px rgba(43,229,255,0.3);
  --glow-violet:      0 0 12px rgba(155,91,255,0.6), 0 0 32px rgba(155,91,255,0.25);
  --glow-amber:       0 0 16px rgba(244,185,66,0.5), 0 0 48px rgba(244,185,66,0.2);
  --glow-sunset:      0 0 16px rgba(255,46,91,0.55), 0 0 48px rgba(255,122,26,0.25);
  --glow-nvg:         0 0 10px rgba(108,255,58,0.6), 0 0 28px rgba(108,255,58,0.25);
  --glow-ok:          0 0 8px rgba(0,255,133,0.6);
  --glow-alert:       0 0 8px rgba(255,51,68,0.7), 0 0 24px rgba(255,51,68,0.3);

  /* Inner glow (for sunken inputs) */
  --shadow-inset:     inset 0 1px 0 0 rgba(0,0,0,0.4), inset 0 0 0 1px var(--obsidian-fog);

  /* ============================================================
     MOTION
     Action movie pacing: snap-cuts. Most state changes <120ms.
     ============================================================ */
  --ease-snap:        cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-instant:      80ms; /* @kind other */
  --dur-fast:         120ms; /* @kind other */
  --dur-mid:          200ms; /* @kind other */
  --dur-slow:         400ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TEXT STYLES
   Use these instead of raw font sizes when you can.
   ============================================================ */

.ol-display,
.ol-h1,
.ol-h2,
.ol-h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: 400;            /* Anton ships as 400 only */
  margin: 0;
}

.ol-display       { font-size: var(--fs-display-xl); }
.ol-display-l     { font-family: var(--font-display); font-size: var(--fs-display-l);
                    text-transform: uppercase; letter-spacing: var(--tracking-display);
                    color: var(--fg-1); line-height: var(--lh-tight); margin:0; }
.ol-h1            { font-size: var(--fs-h1); }
.ol-h2            { font-size: var(--fs-h2); }
.ol-h3            { font-size: var(--fs-h3); }

/* The brand voice — use ONLY for the wordmark and hero headline.
   Neoneon is a tube outline; needs space, glow, and large size to read. */
.ol-brand {
  font-family: var(--font-brand);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--fg-1);
  margin: 0;
}
.ol-brand--neon {
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
}

/* Smooch script accent — graffiti slogan, never below 28px. */
.ol-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.05;
  color: var(--fg-1);
  margin: 0;
}

.ol-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.ol-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--neon-magenta);
}

.ol-body          { font-family: var(--font-body); font-size: var(--fs-body);
                    line-height: var(--lh-body); color: var(--fg-1); }
.ol-body-s        { font-family: var(--font-body); font-size: var(--fs-body-s);
                    line-height: var(--lh-body); color: var(--fg-2); }
.ol-caption       { font-family: var(--font-body); font-size: var(--fs-caption);
                    line-height: var(--lh-snug); color: var(--fg-3);
                    letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.ol-mono          { font-family: var(--font-mono); font-size: var(--fs-body-s);
                    color: var(--fg-2); letter-spacing: var(--tracking-normal); }
.ol-mono-micro    { font-family: var(--font-mono); font-size: var(--fs-micro);
                    color: var(--fg-3); letter-spacing: var(--tracking-wide); }

.ol-terminal      { font-family: var(--font-terminal); font-size: 22px;
                    color: var(--signal-ok); text-shadow: var(--glow-ok);
                    letter-spacing: var(--tracking-wide); }

.ol-link          { color: var(--neon-cyan); text-decoration: none;
                    border-bottom: 1px dashed currentColor;
                    transition: color var(--dur-fast) var(--ease-snap),
                                text-shadow var(--dur-fast) var(--ease-snap); }
.ol-link:hover    { color: var(--neon-magenta); text-shadow: 0 0 8px currentColor; }

/* Base reset for system pages */
.ol-page {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}