/* =============================================================
   Nate Builds AI — Colors & Type Foundation
   Cozy sci-fi · soft pixel · warm command habitat
   ============================================================= */

/* ---------- Webfonts ----------
   Loaded from Google Fonts (substitution noted in README):
   - Space Grotesk : display, station labels, headings
   - Manrope       : body, descriptions, UI
   - VT323         : pixel/terminal accents (timestamps, telemetry, character HUD)
   - JetBrains Mono: code, identifiers, small monospace tokens
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=VT323&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLORS — DEEP SPACE BACKDROP ============ */
  /* Habitat backgrounds: deep purple-blue nebula, never pure black */
  --bg-void:         #0b0a1f;   /* deepest backdrop, behind nebula */
  --bg-nebula:       #15123a;   /* primary scene background */
  --bg-nebula-warm:  #1f1846;   /* warm-tinted nebula pocket */
  --bg-station:      #1a2348;   /* station tile fill, gradient base */
  --bg-station-2:    #232c5a;   /* station tile gradient stop */
  --bg-panel:        #1d2750;   /* opaque panel surface (modal, drawer) */
  --bg-panel-soft:   rgba(29, 39, 80, 0.72); /* glassy panel */
  --bg-rail:         #0f1230;   /* top/bottom system rail */

  /* ============ COLORS — STRUCTURE & EDGES ============ */
  --edge-hairline:   rgba(173, 198, 255, 0.10);  /* faintest tile edge */
  --edge-soft:       rgba(173, 198, 255, 0.18);  /* default border */
  --edge-bright:     rgba(140, 220, 255, 0.55);  /* lit edge / focus */
  --edge-warm:       rgba(255, 198, 143, 0.45);  /* warm trim accent */

  /* ============ COLORS — BRAND PRIMARY (cool) ============ */
  /* Holographic cyan/blue. Anchors all "live" UI surfaces. */
  --hud-cyan:        #7ad8ff;   /* primary holo line */
  --hud-cyan-soft:   #a8e6ff;   /* hover/secondary line */
  --hud-cyan-dim:    #4fa6cf;   /* dimmed/inactive holo */
  --hud-blue:        #5b8bff;   /* deeper indicator blue */
  --hud-violet:      #9a7bff;   /* nebula highlight, dial halo */

  /* ============ COLORS — WARM ACCENTS (cozy injection) ============ */
  /* The differentiator — these break the cold neon and add habitat warmth */
  --warm-amber:      #ffc68f;   /* lamp-glow / approval pending */
  --warm-peach:      #ff9a76;   /* worker pod warm-light */
  --warm-rose:       #ff7d9c;   /* warm accent / personal touch */

  /* ============ BRAND — OPENAGENT ============ */
  --openagent-violet:     #7344c7;   /* logo-matched deep glow (C) — the product's color */
  --openagent-violet-2:   #925cf2;   /* brighter violet for lit edges / CTA hover */
  --warm-cream:      #f5e6c8;   /* paper-mock placards */
  --paper-cream:     #f5e6c8;   /* alias for lab-room paper captions */
  --warm-leaf:       #8fd4a3;   /* habitat plants, nominal pulse */

  /* ============ COLORS — SEMANTIC STATUS ============ */
  --status-nominal:  #8fe3a8;   /* green — system OK */
  --status-ok:       #8fe3a8;   /* alias for trace "ok" rows */
  --status-active:   #7ad8ff;   /* cyan — running */
  --status-pending:  #ffc68f;   /* amber — awaits approval */
  --status-paper:    #f5e6c8;   /* cream — paper/mock label */
  --status-deferred: #b3a3d6;   /* dim violet — reserved */
  --status-alert:    #ff7d9c;   /* rose — needs attention */
  --status-mute:     #6a7299;   /* slate — inactive */

  /* ============ COLORS — TEXT (warm off-white scale) ============ */
  --fg-1: #f4efe2;   /* primary text — warm off-white parchment */
  --fg-0: #ffffff;   /* pure white — only for emphasis (titles, avatar header) */
  --fg-2: #d8d2e8;   /* secondary text — soft lavender white */
  --fg-3: #9aa3c8;   /* tertiary / metadata — dim periwinkle */
  --fg-4: #6a7299;   /* quaternary / placeholder */
  --fg-on-warm: #2a1d3e; /* text on warm/cream backgrounds */

  /* ============ COLORS — GLOWS (used sparingly) ============ */
  --glow-cyan:   0 0 24px rgba(122, 216, 255, 0.45);
  --glow-warm:   0 0 32px rgba(255, 198, 143, 0.30);
  --glow-rose:   0 0 28px rgba(255, 125, 156, 0.35);
  --glow-violet: 0 0 30px rgba(115, 68, 199, 0.45);

  /* ============ TYPE — FAMILIES ============ */
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --font-body:    "Manrope", "Space Grotesk", system-ui, sans-serif;
  --font-pixel:   "VT323", "Courier New", monospace;
  --font-mono:    "JetBrains Mono", "Menlo", monospace;

  /* ============ TYPE — SCALE ============ */
  --fs-pixel-sm: 16px;
  --fs-pixel:    20px;
  --fs-pixel-lg: 26px;
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-md:   15px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;

  /* ============ TYPE — TRACKING ============ */
  --tr-tight:  -0.01em;
  --tr-normal: 0em;
  --tr-loose:  0.06em;
  --tr-station: 0.14em;  /* station labels: 1. CLAUDE CODE */

  /* ============ 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;

  /* ============ RADII ============ */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-tile: 18px;          /* station tile */
  --r-pill: 999px;
  /* Hex notch — used by hexagonal Surfaces icons via clip-path */
  --hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /* Habitat tile shape (rounded-octagonal) */
  --tile-clip: polygon(
    20px 0, calc(100% - 20px) 0, 100% 20px,
    100% calc(100% - 20px), calc(100% - 20px) 100%,
    20px 100%, 0 calc(100% - 20px), 0 20px
  );

  /* ============ SHADOWS — soft, never harsh ============ */
  --shadow-tile:   0 12px 32px rgba(8, 6, 28, 0.55), inset 0 1px 0 rgba(173, 198, 255, 0.08);
  --shadow-lift:   0 18px 48px rgba(8, 6, 28, 0.65), inset 0 1px 0 rgba(173, 198, 255, 0.12);
  --shadow-card:   0 6px 18px rgba(8, 6, 28, 0.45);
  --inner-bevel:   inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  /* ============ MOTION ============ */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --dur-quick:  140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-pulse:  2400ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES — apply via class
   ============================================================= */

.t-display {           /* hero / center tile title */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  letter-spacing: var(--tr-tight);
  line-height: 1.05;
  color: var(--fg-1);
}

.t-h1 {                /* page header */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h2 {                /* tile heading */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-station {           /* station label "1. CLAUDE CODE" */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: var(--tr-station);
  text-transform: uppercase;
  color: var(--hud-cyan-soft);
}

.t-subtitle {          /* "WORKER / EXECUTION STATION" */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-2);
}

.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-2);
}

.t-meta {              /* metadata, timestamps, captions */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-pixel {             /* terminal/HUD accent — readouts, character HUD */
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel);
  letter-spacing: 0.04em;
  color: var(--hud-cyan);
}

.t-pixel-warm {
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel);
  letter-spacing: 0.04em;
  color: var(--warm-amber);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.t-tag {               /* pill/banner status text */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-station);
  text-transform: uppercase;
}

/* Element defaults so raw HTML still looks right inside cards */
body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-nebula); }
h1 { @extend .t-h1; }