/* =========================================================================
   Nodebreak Design System — Tokens
   colors_and_type.css

   Tokens are intentionally narrow: the Nodebreak palette is high-contrast
   neon-on-dark. A small set of colours is doing a LOT of work, so we
   document the intent for each token rather than inventing more swatches.
   ========================================================================= */

/* -----------------------------------------------------------------------
   FONTS
   Primary typeface is Jost (geometric sans, self-hosted in the design
   system at assets/fonts/). Share Tech Mono is retained only for the
   monospace HUD / readout role, which Jost cannot fill.
   ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* Jost — variable font (weights 100–900), normal + italic */
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/Jost-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/Jost-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =====================================================================
     CORE PALETTE
     ===================================================================== */

  /* Backgrounds — deep, almost lightless. Never pure #000; always a hint
     of cyan to feel "powered on". */
  --nb-bg-void:        #04070A;   /* outer page; behind everything */
  --nb-bg-base:        #070C10;   /* default surface */
  --nb-bg-raised:      #0C141A;   /* cards, panels */
  --nb-bg-sunken:      #02050700; /* recesses, input wells */
  --nb-bg-overlay:     rgba(4, 7, 10, 0.72); /* modal scrim */

  /* Path / Safe — the teal "circuit" colour. Used for guidance,
     primary actions, navigable surfaces, the player trail. */
  --nb-teal-50:        #E6FFFB;
  --nb-teal-100:       #B8FFF3;
  --nb-teal-200:       #6CF7E0;
  --nb-teal-400:       #2EE6D2;   /* DEFAULT path */
  --nb-teal-500:       #1FCFBE;
  --nb-teal-600:       #14A89A;
  --nb-teal-700:       #0B6C64;
  --nb-teal-glow:      rgba(46, 230, 210, 0.55);
  --nb-teal-glow-soft: rgba(46, 230, 210, 0.18);

  /* Hazard / Danger — used ONLY for things that kill, warn, or destroy.
     This is a sacred colour in Nodebreak. Never use it for decoration. */
  --nb-red-400:        #FF4A5C;
  --nb-red-500:        #FF2A3C;   /* DEFAULT hazard */
  --nb-red-600:        #E11D2F;
  --nb-red-700:        #A5121F;
  --nb-red-glow:       rgba(255, 42, 60, 0.55);
  --nb-red-glow-soft:  rgba(255, 42, 60, 0.18);

  /* Player / Light — bright cyan-white. The orb you control. */
  --nb-player:         #F2FCFF;
  --nb-player-core:    #FFFFFF;
  --nb-player-halo:    rgba(180, 245, 255, 0.85);

  /* Node green — secondary accent for "static" / inert nodes on the
     board, achievements, success states. */
  --nb-node-green:     #7AE07A;
  --nb-node-green-dim: rgba(122, 224, 122, 0.45);

  /* Neutral ramp — cool greys for chrome, dividers, body text. */
  --nb-ink-00:         #FFFFFF;
  --nb-ink-10:         #E8F1F4;
  --nb-ink-20:         #BDCCD3;
  --nb-ink-30:         #8A9BA3;
  --nb-ink-40:         #5A6A72;
  --nb-ink-50:         #3A464D;
  --nb-ink-60:         #232B30;
  --nb-ink-70:         #161C20;
  --nb-ink-80:         #0C1115;
  --nb-ink-90:         #050709;

  /* =====================================================================
     SEMANTIC ALIASES — use these in components, not the raw scale.
     ===================================================================== */

  /* Surfaces */
  --bg:                var(--nb-bg-base);
  --bg-elevated:       var(--nb-bg-raised);
  --bg-overlay:        var(--nb-bg-overlay);

  /* Foreground */
  --fg:                var(--nb-ink-10);
  --fg-muted:          var(--nb-ink-20);
  --fg-subtle:         var(--nb-ink-30);
  --fg-faint:          var(--nb-ink-40);
  --fg-on-teal:        var(--nb-bg-void);
  --fg-on-red:         var(--nb-ink-00);

  /* Borders / dividers */
  --border-hairline:   rgba(46, 230, 210, 0.12);
  --border-soft:       rgba(46, 230, 210, 0.22);
  --border-strong:     var(--nb-teal-400);
  --border-hazard:     var(--nb-red-500);

  /* Semantic intents */
  --intent-primary:    var(--nb-teal-400);
  --intent-danger:     var(--nb-red-500);
  --intent-success:    var(--nb-node-green);
  --intent-info:       var(--nb-teal-200);

  /* Glows — drop-in box-shadows for the neon effect */
  --glow-teal-sm:      0 0 8px var(--nb-teal-glow-soft), 0 0 2px var(--nb-teal-glow);
  --glow-teal-md:      0 0 18px var(--nb-teal-glow-soft), 0 0 4px var(--nb-teal-glow);
  --glow-teal-lg:      0 0 36px var(--nb-teal-glow), 0 0 8px var(--nb-teal-400);
  --glow-red-sm:       0 0 8px var(--nb-red-glow-soft), 0 0 2px var(--nb-red-glow);
  --glow-red-md:       0 0 18px var(--nb-red-glow-soft), 0 0 4px var(--nb-red-glow);
  --glow-red-lg:       0 0 36px var(--nb-red-glow), 0 0 8px var(--nb-red-500);
  --glow-player:       0 0 20px var(--nb-player-halo), 0 0 4px var(--nb-player-core);

  /* Text shadow versions (for neon type) */
  --text-glow-teal:    0 0 6px var(--nb-teal-glow), 0 0 14px var(--nb-teal-glow-soft);
  --text-glow-red:     0 0 6px var(--nb-red-glow), 0 0 14px var(--nb-red-glow-soft);

  /* =====================================================================
     TYPOGRAPHY
     ===================================================================== */

  --font-display: 'Jost', 'Impact', system-ui, sans-serif;
  --font-heading: 'Jost', system-ui, sans-serif;
  --font-ui:      'Jost', 'Inter', system-ui, sans-serif;
  --font-mono:    'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — modular, slightly compressed at the bottom for HUD use */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.45;
  --lh-loose: 1.7;

  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.14em;   /* HUD / labels */
  --tracking-widest:   0.24em;   /* eyebrow tags */

  /* =====================================================================
     SHAPE
     ===================================================================== */
  --radius-0: 0;      /* HUD panels, blocks — Nodebreak is sharp */
  --radius-1: 2px;    /* minimal softening, default for inputs */
  --radius-2: 4px;
  --radius-3: 8px;    /* cards */
  --radius-pill: 999px;

  /* Borders are usually 1px hairlines or 2px load-bearing teal */
  --border-1: 1px;
  --border-2: 2px;

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

  /* =====================================================================
     MOTION — fast, kinetic. Nothing lingers.
     ===================================================================== */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* "launch" */
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);    /* "arrest" */
  --ease-snap:   cubic-bezier(0.85, 0, 0.15, 1);
  --ease-linear: linear;

  /* =====================================================================
     ELEVATION — flat by default; the neon glow IS the elevation system.
     ===================================================================== */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(46, 230, 210, 0.08), 0 1px 12px rgba(0, 0, 0, 0.4);
  --elev-2: 0 2px 0 rgba(46, 230, 210, 0.10), 0 6px 24px rgba(0, 0, 0, 0.6);
  --elev-3: 0 4px 0 rgba(46, 230, 210, 0.12), 0 16px 48px rgba(0, 0, 0, 0.75);

  /* Inset border (HUD frame look) */
  --inset-hairline: inset 0 0 0 1px var(--border-hairline);
  --inset-soft:     inset 0 0 0 1px var(--border-soft);
  --inset-strong:   inset 0 0 0 1px var(--border-strong);
  --inset-hazard:   inset 0 0 0 1px var(--border-hazard);
}

/* =========================================================================
   SEMANTIC TYPE STYLES — applied directly, no class-juggling needed.
   ========================================================================= */
.nb-display,
.nb h1 { /* the wordmark voice — use sparingly */
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-transform: uppercase;
}

.nb-h1, .nb h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}

.nb-h2, .nb h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.nb-h3, .nb h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.nb-eyebrow, .nb h5 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--nb-teal-400);
}

.nb-body, .nb p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.nb-lede {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg);
}

.nb-meta, .nb small {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  text-transform: uppercase;
}

.nb-mono, .nb code, .nb kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--nb-teal-200);
}

.nb-hud {  /* HUD readout style — small, tracked-out, teal */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--nb-teal-400);
  text-transform: uppercase;
}

/* Page base — apply with class="nb" on <body> */
.nb {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}