/* ============================================================================
   JBIT SOLUTIONS — DESIGN SYSTEM
   colors_and_type.css
   "Early-internet arcade cabinet" — neon-on-black, Space Invaders energy,
   grounded in the JBit cyan brand mark.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FONTS  (loaded from Google Fonts CDN — see note in README about substitution)
   Press Start 2P  -> pixel arcade display (use SPARINGLY, headlines/labels only)
   VT323           -> CRT terminal body (primary readable body in arcade context)
   Silkscreen      -> tiny pixel UI labels / chips / HUD readouts
   Space Grotesk   -> utility/long-form readable sans (dense paragraphs, forms)
---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ===== BASE COLOR PRIMITIVES ============================================ */

  /* Black is the canvas. Everything sits on the void. */
  --black:        #000000;
  --void:         #05070C;   /* deepest panel, a hair of blue in it          */
  --panel:        #0B0F18;   /* raised surface / card                        */
  --panel-2:      #121826;   /* hovered / nested surface                     */
  --panel-3:      #1A2233;   /* input wells, code blocks                     */

  /* Grid + hairlines — the CRT graph-paper feel */
  --grid-line:    #142235;   /* faint background grid                        */
  --grid-line-2:  #0E1826;   /* even fainter                                 */

  /* ----- BRAND CYAN (the JBit mark — cube, cloud, circuit) ----- */
  --cyan:         #2EC4FF;   /* PRIMARY electric blue                        */
  --cyan-bright:  #6FDBFF;   /* hover / glow highlight                       */
  --cyan-deep:    #0A78C9;   /* pressed / deep shadow of cyan                */
  --sky:          #4FC3F7;   /* JBit Cloud sky-blue                          */
  --cyan-glow:    rgba(46,196,255,0.55); /* used in box/text shadows         */

  /* ----- ARCADE ACCENTS (Space Invaders palette, tuned to harmonize) ----- */
  --magenta:      #FF3DA6;   /* hot pink — alerts, secondary CTA, invaders   */
  --purple:       #9B6CFF;   /* from circuit traces — tertiary               */
  --green:        #34E27A;   /* phosphor green — success, "online"           */
  --green-bright: #5BFF9E;
  --amber:        #FFC24B;   /* score / warning / coins                      */
  --red:          #FF4D5E;   /* danger / destroy                             */

  /* ----- FOREGROUND ----- */
  --fg:           #E6F5FF;   /* cool white — primary text                    */
  --fg-dim:       #8FB2CC;   /* secondary text                               */
  --fg-muted:     #4E6B82;   /* tertiary / disabled / captions               */
  --fg-invert:    #05070C;   /* text on bright cyan fills                    */

  /* ===== SEMANTIC TOKENS ================================================== */
  --bg:               var(--black);
  --bg-grid:          var(--grid-line);
  --surface:          var(--panel);
  --surface-raised:   var(--panel-2);
  --surface-well:     var(--panel-3);

  --border:           #1E2D40;   /* default hairline                         */
  --border-strong:    #314A66;
  --border-neon:      var(--cyan);

  --text:             var(--fg);
  --text-secondary:   var(--fg-dim);
  --text-muted:       var(--fg-muted);

  --primary:          var(--cyan);
  --primary-hover:    var(--cyan-bright);
  --primary-press:    var(--cyan-deep);
  --on-primary:       var(--fg-invert);

  --accent:           var(--magenta);
  --success:          var(--green);
  --warning:          var(--amber);
  --danger:           var(--red);

  --link:             var(--cyan);
  --link-hover:       var(--cyan-bright);
  --focus-ring:       var(--cyan-bright);

  /* ===== TYPE FAMILIES ==================================================== */
  --font-pixel:    'Press Start 2P', 'Silkscreen', monospace;  /* display    */
  --font-term:     'VT323', 'Courier New', monospace;          /* body/CRT   */
  --font-hud:      'Silkscreen', 'Press Start 2P', monospace;  /* tiny labels*/
  --font-util:     'Space Grotesk', system-ui, sans-serif;     /* long-form  */
  --font-mono:     'VT323', 'Courier New', monospace;          /* code       */

  /* ===== TYPE SCALE ======================================================
     Pixel font (Press Start 2P) has NO descenders to speak of and renders
     ~1.4x its nominal size — keep it big, keep line-height loose, never below
     ~10px. Terminal font (VT323) is tiny per-px so it runs LARGE (18px floor).
  ------------------------------------------------------------------------- */
  --fs-display:  clamp(34px, 6vw, 64px); /* @kind font */
  --fs-h1:       clamp(26px, 4vw, 40px); /* @kind font */
  --fs-h2:       clamp(18px, 2.6vw, 26px); /* @kind font */
  --fs-h3:       16px;
  --fs-label:    11px;   /* Silkscreen / Press Start HUD labels             */
  --fs-micro:    9px;    /* smallest pixel label — use rarely               */

  --fs-body:     22px;   /* VT323 body — looks ~15px optical                */
  --fs-body-lg:  26px;
  --fs-body-sm:  19px;
  --fs-util:     16px;   /* Space Grotesk body                              */
  --fs-util-sm:  14px;

  --lh-pixel:    1.5;    /* @kind font */
  --lh-term:     1.25;   /* @kind font */
  --lh-util:     1.6;    /* @kind font */

  --ls-pixel:    0.02em; /* @kind font */
  --ls-hud:      0.12em; /* @kind font */

  /* ===== SPACING (8px arcade grid) ======================================= */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ===== RADII — mostly SQUARE. Pixels don't round. ====================== */
  --r-0:    0px;      /* default — hard pixel corners                       */
  --r-sm:   2px;      /* the most we soften                                 */
  --r-md:   4px;
  --r-pill: 999px;    /* only for status dots / coin chips                  */

  /* ===== BORDERS ========================================================= */
  --bw:        2px;   /* standard arcade border weight                      */
  --bw-thick:  3px;
  --bw-hair:   1px;

  /* ===== SHADOWS / GLOW (neon, never soft-gray drop shadows) ============= */
  --glow-cyan:    0 0 0 2px var(--cyan), 0 0 12px var(--cyan-glow);
  --glow-cyan-sm: 0 0 8px var(--cyan-glow);
  --glow-cyan-lg: 0 0 24px rgba(46,196,255,0.45);
  --glow-magenta: 0 0 12px rgba(255,61,166,0.55);
  --glow-green:   0 0 12px rgba(52,226,122,0.55);
  --text-glow:    0 0 8px var(--cyan-glow);
  --text-glow-mag:0 0 8px rgba(255,61,166,0.6);
  /* "pixel" offset shadow — the chunky drop used on cards/buttons */
  --shadow-pixel:    4px 4px 0 0 var(--cyan-deep);
  --shadow-pixel-mag:4px 4px 0 0 #B01E6E;
  --shadow-pixel-lg: 6px 6px 0 0 #06334f;

  /* ===== MOTION ========================================================== */
  --ease-step:   steps(4, end); /* @kind other */
  --ease-snap:   cubic-bezier(.2,.9,.3,1); /* @kind other */
  --t-fast:      90ms;  /* @kind other */
  --t-base:      160ms; /* @kind other */
  --t-slow:      280ms; /* @kind other */

  /* ===== TEXTURE LAYERS ================================================== */
  --scanline: repeating-linear-gradient(
                 to bottom,
                 rgba(0,0,0,0) 0px,
                 rgba(0,0,0,0) 2px,
                 rgba(0,0,0,0.28) 3px,
                 rgba(0,0,0,0.28) 4px); /* @kind other */
  --grid-bg: linear-gradient(var(--grid-line-2) 1px, transparent 1px),
             linear-gradient(90deg, var(--grid-line-2) 1px, transparent 1px); /* @kind other */
  --grid-size: 32px; /* @kind spacing */
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — apply when this sheet governs a page directly.
   ============================================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-term);
  font-size: var(--fs-body);
  line-height: var(--lh-term);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .pixel {
  font-family: var(--font-pixel);
  color: var(--cyan);
  text-shadow: var(--text-glow);
  letter-spacing: var(--ls-pixel);
  line-height: var(--lh-pixel);
  font-weight: 400;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.display {
  font-family: var(--font-pixel);
  font-size: var(--fs-display);
  line-height: var(--lh-pixel);
  color: var(--fg);
  text-shadow: var(--text-glow);
}

p, .body {
  font-family: var(--font-term);
  font-size: var(--fs-body);
  line-height: var(--lh-term);
  color: var(--text-secondary);
}

.prose {                      /* dense long-form readable text */
  font-family: var(--font-util);
  font-size: var(--fs-util);
  line-height: var(--lh-util);
  color: var(--text-secondary);
}

.hud, .label {
  font-family: var(--font-hud);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-hud);
  text-transform: uppercase;
  color: var(--cyan);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--green);
}

a, .link {
  color: var(--link);
  text-decoration: none;
  border-bottom: var(--bw-hair) dashed currentColor;
}
a:hover, .link:hover { color: var(--link-hover); text-shadow: var(--text-glow); }

:focus-visible {
  outline: var(--bw) solid var(--focus-ring);
  outline-offset: 2px;
}