/* =========================================================================
   AI Gamedev — Design Tokens
   Dark mode only. IDE-native. No light theme.
   ========================================================================= */

/* ---- Web fonts (flagged substitution — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------------
     SURFACES — near-black, stepped. Flat fills only; no gradients.
     --------------------------------------------------------------------- */
  --bg-base:        #0B0D10;   /* page / canvas */
  --bg-panel:       #14171C;   /* cards, sidebars */
  --bg-raised:      #1B1F26;   /* menus, tooltips, hover on panel */
  --bg-overlay:     #22272F;   /* modal surface */
  --bg-code:        #0E1116;   /* code blocks, terminals */

  /* ---------------------------------------------------------------------
     HAIRLINES — the primary separator in this system.
     --------------------------------------------------------------------- */
  --line:           #242A33;   /* default border */
  --line-strong:    #333A44;   /* emphasized border (active tab, etc) */
  --line-subtle:    #1B2028;   /* nearly-invisible divider inside panels */

  /* ---------------------------------------------------------------------
     TEXT
     --------------------------------------------------------------------- */
  --fg-hi:          #F5F7FA;   /* headings, high-emphasis */
  --fg:             #E6E8EB;   /* body */
  --fg-muted:       #8A94A6;   /* secondary labels */
  --fg-dim:         #6B7280;   /* line numbers, timestamps */
  --fg-disabled:    #4B5361;

  /* ---------------------------------------------------------------------
     ACCENT — IDE blue. One accent, period.
     --------------------------------------------------------------------- */
  --accent:         #3B82F6;
  --accent-hover:   #5497FF;
  --accent-press:   #2563EB;
  --accent-900:     #1E3A5F;
  --accent-tint:    rgba(59,130,246,0.12);   /* selection, active row */
  --accent-ring:    rgba(59,130,246,0.25);

  /* ---------------------------------------------------------------------
     SEMANTIC — CI/CD validation states ONLY. Never decorative.
     --------------------------------------------------------------------- */
  --ok:             #4ADE80;
  --ok-bg:          #0F1F15;
  --ok-line:        #1E3A29;

  --warn:           #F59E0B;
  --warn-bg:        #201A0A;
  --warn-line:      #3A2D12;

  --fail:           #EF4444;
  --fail-bg:        #1F1012;
  --fail-line:      #3A1A1C;

  --info:           var(--accent);
  --info-bg:        rgba(59,130,246,0.08);
  --info-line:      #1E3A5F;

  /* ---------------------------------------------------------------------
     TYPE — families
     --------------------------------------------------------------------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --font-display: var(--font-sans); /* no separate display face */

  /* ---------------------------------------------------------------------
     TYPE — scale (px). Tight, deliberate.
     --------------------------------------------------------------------- */
  --fs-11:  11px;   /* eyebrow / uppercase labels */
  --fs-12:  12px;   /* meta, chips */
  --fs-13:  13px;   /* captions, card labels */
  --fs-14:  14px;   /* body small, table cells */
  --fs-15:  15px;   /* default UI */
  --fs-16:  16px;   /* body */
  --fs-18:  18px;   /* lead / h5 */
  --fs-20:  20px;   /* h4 */
  --fs-24:  24px;   /* h3 */
  --fs-32:  32px;   /* h2 */
  --fs-44:  44px;   /* h1 */
  --fs-64:  64px;   /* display */

  /* line-heights */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-normal: 1.5;

  /* tracking */
  --tr-tight:   -0.02em;
  --tr-eyebrow:  0.08em;
  --tr-mono:     0;

  /* ---------------------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------------------- */
  --sp-0:  0;
  --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-24: 96px;

  /* ---------------------------------------------------------------------
     RADII — sharp. Nothing rounded unless it's a status dot.
     --------------------------------------------------------------------- */
  --r-0:   0px;       /* tabs, table cells */
  --r-sm:  2px;       /* inputs, buttons */
  --r-md:  4px;       /* cards, panels, modals */
  --r-full: 9999px;   /* status dots only */

  /* ---------------------------------------------------------------------
     ELEVATION — flat system. One shadow token, for modals only.
     --------------------------------------------------------------------- */
  --shadow-modal: 0 16px 40px rgba(0,0,0,0.6);
  --ring-focus:   0 0 0 1px var(--accent) inset, 0 0 0 3px var(--accent-ring);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --dur-fast: 80ms;
  --dur-med:  160ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --w-content: 1200px;
  --w-wide:    1360px;
  --w-nav:     240px;
  --w-inspector: 320px;
  --h-topbar:  48px;
  --h-statusbar: 24px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Import this file and these selectors are live, IDE-theme defaults.
   ========================================================================= */

html, body {
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  color: var(--fg-hi);
  font-family: var(--font-display);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0;
}
h1 { font-size: var(--fs-44); font-weight: 800; }
h2 { font-size: var(--fs-32); }
h3 { font-size: var(--fs-24); }
h4 { font-size: var(--fs-20); }
h5 { font-size: var(--fs-18); font-weight: 600; }

p  { margin: 0; color: var(--fg); }

/* Eyebrow / uppercase label */
.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-muted);
  font-weight: 500;
}

/* Inline code + monospace identifiers */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-hi);
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg);
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  overflow: auto;
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--accent-tint);
  color: var(--fg-hi);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}