/* ============================================================
   Nibea Design System — Core Tokens
   A Jarvis-style personal productivity HUD.
   ============================================================ */

/* ---------- Fonts (Google Fonts substitutes — flag to user) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — Surface (deep space)
     The whole product lives on near-black with a cool tint.
     ---------------------------------------------------------- */
  --bg-void:        #000308;   /* outer canvas — true black with a drop of blue */
  --bg-deep:        #03070F;   /* main app background */
  --bg-panel:       #06101E;   /* raised panel / card */
  --bg-elevated:    #0A1A2E;   /* hover / focused panel */
  --bg-grid:        #0E2238;   /* faint structural grid lines */

  /* ----------------------------------------------------------
     COLOR — Primary glow (the Nibea cyan)
     Used for rings, icons, key lines, active text.
     ---------------------------------------------------------- */
  --cyan-50:   #E6FAFF;
  --cyan-100:  #B8EEFF;
  --cyan-200:  #7CDDFF;
  --cyan-300:  #3CC9FF;   /* PRIMARY — Nibea Cyan */
  --cyan-400:  #18B4F0;
  --cyan-500:  #0C8CC4;
  --cyan-600:  #0A6A95;
  --cyan-700:  #084C6B;
  --cyan-800:  #062F42;
  --cyan-900:  #04192A;

  /* ----------------------------------------------------------
     COLOR — Hot core (white-hot center of any glow)
     ---------------------------------------------------------- */
  --core-hot:  #FFFFFF;
  --core-warm: #DCF6FF;

  /* ----------------------------------------------------------
     COLOR — Semantic accents
     Used SPARINGLY. Cyan stays the lead.
     ---------------------------------------------------------- */
  --amber:     #FFB547;   /* warning / critical moment */
  --amber-dim: #6E4C12;
  --red:       #FF4D6D;   /* alert / destructive */
  --red-dim:   #5C1A28;
  --green:     #4EE39C;   /* confirm / habit complete */
  --green-dim: #134E32;
  --violet:    #9B7CFF;   /* secondary accent for variety */

  /* ----------------------------------------------------------
     COLOR — Foreground / text
     ---------------------------------------------------------- */
  --fg-1:      #E8F4FF;   /* primary text */
  --fg-2:      #9EBED8;   /* secondary text */
  --fg-3:      #5E7E9B;   /* tertiary / labels */
  --fg-4:      #34526E;   /* disabled / grid */
  --fg-cyan:   var(--cyan-300);
  --fg-on-cyan:#03070F;   /* text on solid cyan */

  /* ----------------------------------------------------------
     COLOR — Glow shadows (use as box-shadow / filter)
     ---------------------------------------------------------- */
  --glow-cyan-sm:  0 0 8px rgba(60, 201, 255, 0.45); /* @kind shadow */
  --glow-cyan-md:  0 0 16px rgba(60, 201, 255, 0.55), 0 0 32px rgba(60, 201, 255, 0.25); /* @kind shadow */
  --glow-cyan-lg:  0 0 24px rgba(60, 201, 255, 0.7), 0 0 64px rgba(60, 201, 255, 0.35); /* @kind shadow */
  --glow-cyan-xl:  0 0 40px rgba(60, 201, 255, 0.8), 0 0 120px rgba(60, 201, 255, 0.4); /* @kind shadow */
  --glow-amber-md: 0 0 16px rgba(255, 181, 71, 0.55); /* @kind shadow */
  --glow-inner:    inset 0 0 24px rgba(60, 201, 255, 0.18); /* @kind shadow */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font families
     Display = wide geometric sci-fi (Chakra Petch)
     Body    = neutral modern sans (Space Grotesk)
     Mono    = data readouts (JetBrains Mono)
     ---------------------------------------------------------- */
  --font-display: 'Chakra Petch', 'Rajdhani', 'Orbitron', system-ui, sans-serif;
  --font-body:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Sizes (px)
     ---------------------------------------------------------- */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  44px;
  --t-4xl:  64px;
  --t-hero: 88px;

  /* ----------------------------------------------------------
     SPACING (8px base, dense HUD scale)
     ---------------------------------------------------------- */
  --s-0:  0; /* @kind 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;

  /* ----------------------------------------------------------
     RADII — Hexagonal HUDs lean ANGULAR. Use small radii.
     ---------------------------------------------------------- */
  --r-none: 0; /* @kind radius */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px; /* @kind radius */
  --r-circle: 50%; /* @kind radius */

  /* ----------------------------------------------------------
     BORDERS — hairlines are the visual language
     ---------------------------------------------------------- */
  --bw-hair:  1px; /* @kind spacing */
  --bw-thin:  1px; /* @kind spacing */
  --bw-thick: 2px; /* @kind spacing */
  --b-line:        1px solid rgba(60, 201, 255, 0.25); /* @kind other */
  --b-line-strong: 1px solid rgba(60, 201, 255, 0.55); /* @kind other */
  --b-line-dim:    1px solid rgba(60, 201, 255, 0.10); /* @kind other */
  --b-line-amber:  1px solid rgba(255, 181, 71, 0.55); /* @kind other */

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 520ms; /* @kind other */
  --dur-bloom: 1800ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ROLES — drop-in selectors
   ============================================================ */

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

/* ---- Display ---- */
.h-hero, h1.hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
  text-shadow: var(--glow-cyan-md);
  line-height: 1.0;
}

.h-display, h1 {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
  line-height: 1.05;
}

h2, .h-2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-1);
  line-height: 1.15;
}

h3, .h-3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-cyan);
  line-height: 1.2;
}

/* ---- HUD label — short tracked uppercase ---- */
.hud-label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-cyan);
}

/* ---- Body ---- */
p, .body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--fg-2);
  line-height: 1.55;
}

.body-sm { font-size: var(--t-sm); color: var(--fg-2); }
.body-lg { font-size: var(--t-md); color: var(--fg-1); }

/* ---- Mono / data ---- */
code, .mono, .readout {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--cyan-200);
  letter-spacing: 0.02em;
}

.readout-lg {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  color: var(--cyan-100);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---- Panel — the canonical bordered surface ---- */
.panel {
  background: linear-gradient(180deg, rgba(10, 26, 46, 0.65), rgba(6, 16, 30, 0.85));
  border: var(--b-line);
  border-radius: var(--r-md);
  box-shadow: var(--glow-inner);
}

/* ---- Faint dot grid backdrop ---- */
.grid-bg {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(rgba(60, 201, 255, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}