/* ============================================================
   GLOBAL WARNING NETWORKS — Design System Tokens
   Colors and type variables.
   ============================================================ */

/* -------- Fonts -------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap");

@font-face {
  font-family: "BNdemo";
  src: url("../fonts/BNdemo.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Thuast";
  src: url("../fonts/Thuast.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "CyberCopix";
  src: url("../fonts/Cyber Copix.otf") format("opentype");
  font-display: swap;
}

:root {
  /* ---------------- Color: Core ---------------- */
  /* Void / space — primary background */
  --void:           #000000;
  --space:          #06080f;
  --space-deep:     #0a0e1a;
  --space-raised:   #11172a;
  --space-card:     #161e33;

  /* Ocean — earth blue family */
  --ocean-900:      #0c1a2e;
  --ocean-800:      #142540;
  --ocean-700:      #1e3a64;
  --ocean-600:      #305080;
  --ocean-500:      #4878a8;
  --ocean-400:      #6090c0;
  --ocean-300:      #8eb6db;

  /* Alert — broadcast red */
  --alert-900:      #5a0a14;
  --alert-800:      #8a1320;
  --alert-700:      #b01828;
  --alert-600:      #d32034;        /* PRIMARY ALERT */
  --alert-500:      #e83a4e;
  --alert-400:      #ff5060;        /* signal-wave bright */
  --alert-300:      #ff8a96;
  --alert-glow:     #ff3a50;

  /* Flame — amber / warning beacon */
  --flame-700:      #8a4a10;
  --flame-600:      #c06820;
  --flame-500:      #f29024;        /* PRIMARY FLAME */
  --flame-400:      #ffb04a;
  --flame-300:      #ffd07a;

  /* Chrome — silver / metal */
  --chrome-100:     #f7f7f9;
  --chrome-200:     #e3e6ec;
  --chrome-300:     #c0c4cc;
  --chrome-400:     #9aa0aa;
  --chrome-500:     #707880;
  --chrome-600:     #4a5260;
  --chrome-700:     #2a3040;

  /* ---------------- Semantic Foreground / Background ---------------- */
  --bg:             var(--space-deep);
  --bg-elev-1:      var(--space-raised);
  --bg-elev-2:      var(--space-card);
  --bg-paper:       var(--chrome-100);  /* for light cards / print */

  --fg:             var(--chrome-100);
  --fg-1:           var(--chrome-100);
  --fg-2:           var(--chrome-300);
  --fg-3:           var(--chrome-400);
  --fg-muted:       var(--chrome-500);
  --fg-inverse:     var(--space-deep);

  --line:           #232a3d;
  --line-strong:    #303a55;
  --line-glow:      var(--alert-glow);

  /* ---------------- Semantic State ---------------- */
  --accent:         var(--alert-600);
  --accent-hover:   var(--alert-500);
  --accent-press:   var(--alert-700);
  --accent-glow:    var(--alert-glow);

  --warn:           var(--flame-500);
  --warn-hover:     var(--flame-400);

  --info:           var(--ocean-500);
  --ok:             #2db77a;
  --danger:         var(--alert-600);

  /* ---------------- Type — base ---------------- */
  --font-display:   "BNdemo", "Big Shoulders Display", Impact, system-ui, sans-serif;
  --font-broadcast: "Thuast", "Audiowide", "Orbitron", system-ui, sans-serif;        /* sci-fi italic / broadcast */
  --font-body:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — fluid-ish but plain px so the tokens are predictable */
  --t-xs:           12px;
  --t-sm:           14px;
  --t-base:         16px;
  --t-md:           18px;
  --t-lg:           22px;
  --t-xl:           28px;
  --t-2xl:          36px;
  --t-3xl:          48px;
  --t-4xl:          64px;
  --t-5xl:          88px;
  --t-6xl:          120px;

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

  --ls-tight:       -0.02em;
  --ls-normal:      0;
  --ls-wide:        0.04em;
  --ls-wider:       0.12em;       /* broadcast lower-third caps */
  --ls-ticker:      0.22em;

  /* ---------------- Radii ---------------- */
  --r-none:         0;
  --r-sm:           2px;
  --r-md:           4px;
  --r-lg:           8px;
  --r-xl:           14px;
  --r-pill:         999px;

  /* Cards are mostly sharp / broadcast-style; radii are SMALL by default */

  /* ---------------- Spacing ---------------- */
  --s-1:            4px;
  --s-2:            8px;
  --s-3:            12px;
  --s-4:            16px;
  --s-5:            24px;
  --s-6:            32px;
  --s-7:            48px;
  --s-8:            64px;
  --s-9:            96px;

  /* ---------------- Shadows / Glow ---------------- */
  --shadow-sm:      0 1px 0 rgba(0,0,0,.4);
  --shadow-md:      0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:      0 18px 48px rgba(0,0,0,.55);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5);

  --glow-alert:     0 0 0 1px rgba(255,58,80,.5), 0 0 24px rgba(255,58,80,.35);
  --glow-flame:     0 0 0 1px rgba(242,144,36,.5), 0 0 24px rgba(242,144,36,.35);
  --glow-ocean:     0 0 0 1px rgba(96,144,192,.4), 0 0 22px rgba(96,144,192,.3);

  /* Chrome bevel — silver text */
  --chrome-text-gradient: linear-gradient(180deg, #ffffff 0%, #d8dde6 38%, #8a929e 60%, #f0f2f5 78%, #b8bec8 100%);

  /* Scanline overlay (for broadcast feel) */
  --scanlines: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,.025) 3px,
      rgba(255,255,255,0) 4px
  );

  /* Motion */
  --ease-out:        cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:     cubic-bezier(.65, 0, .35, 1);
  --ease-broadcast:  cubic-bezier(.2, .9, .15, 1);  /* sharp arrive, soft settle */
  --dur-fast:        120ms;
  --dur-base:        220ms;
  --dur-slow:        400ms;
  --dur-broadcast:   900ms;  /* lower-third reveal */
}

/* ===================== Semantic element styles ===================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* Display headlines — "GLOBAL WARNING" treatment */
h1, .gwn-h1 {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 var(--s-5);
  color: var(--fg-1);
}

h2, .gwn-h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  color: var(--fg-1);
}

h3, .gwn-h3 {
  font-family: var(--font-body);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-3);
  color: var(--fg-1);
}

h4, .gwn-h4 {
  font-family: var(--font-body);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
  color: var(--fg-1);
}

/* Broadcast eyebrow / lower-third */
.gwn-eyebrow {
  font-family: var(--font-broadcast);
  font-style: italic;
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--alert-500);
}

/* Ticker / dateline */
.gwn-ticker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-ticker);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .gwn-p {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--s-4);
}

.gwn-lead {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lh-base);
  color: var(--fg-1);
  font-weight: 500;
}

small, .gwn-small {
  font-size: var(--t-xs);
  color: var(--fg-3);
  letter-spacing: var(--ls-wide);
}

code, kbd, samp, pre, .gwn-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,.06);
  padding: 0 6px;
  border-radius: var(--r-sm);
  color: var(--chrome-200);
}

/* Chrome-text effect — for big "GLOBAL WARNING" headlines */
.gwn-chrome {
  background: var(--chrome-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Alert-text glow */
.gwn-alert-text {
  color: var(--alert-400);
  text-shadow: 0 0 16px rgba(255,58,80,.65);
}