/* ============================================================
   KreepCore - Design Tokens
   CSS custom properties (variables)
   ============================================================ */

/* --- Self-hosted fonts (GDPR) ---
   WOFF2 first for modern browsers (5-7 KB), TTF as fallback. */
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron-400.woff2') format('woff2'),
       url('../fonts/orbitron-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron-700.woff2') format('woff2'),
       url('../fonts/orbitron-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron-900.woff2') format('woff2'),
       url('../fonts/orbitron-900.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo2-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url('../fonts/share-tech-mono.woff2') format('woff2'),
       url('../fonts/share-tech-mono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Custom Properties --- */
:root {
  /* Animation play-state (toggled by JS on visibilitychange) */
  --anim-state: running;

  /* Typography stacks */
  --font-display: 'Orbitron', 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Orbitron', 'Exo 2', sans-serif;
  --font-mono: 'Share Tech Mono', 'SF Mono', 'Fira Code', monospace;

  /* Backgrounds (theme-overridable) */
  --bg-void: #06060f;
  --bg-panel: #0d0d1f;
  --bg-surface: #141428;
  --bg-hover: #1c1c36;
  --bg-divider: #252545;

  /* Accent colors (theme-overridable) */
  --cyan: #00f0ff;
  --accent: #00f0ff;
  --accent-rgb: 0, 240, 255;

  /* Fixed accent colors */
  --purple: #8b5cf6;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;

  /* Text */
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-dim: #64748b;

  /* Resource colors */
  --ore-color: #f59e0b;
  --helium-color: #3b82f6;
  --qbits-color: #8b5cf6;
  --credits-color: #10b981;
  --energy-color: #eab308;
  --plasma-color: #b0b8c8;
  --alloy-color: #5fb8c8;

  /* Glass blur scale (used by backdrop-filter on overlays, panels, modals) */
  --blur-sm: 4px;
  --blur-md: 6px;
  --blur-lg: 8px;

  /* Translucent black scrims (panel shadows, modal backdrops, overlays).
     Numeric name = alpha * 100. Only alphas used 3+ times are tokenised. */
  --scrim-15: rgba(0, 0, 0, 0.15);
  --scrim-35: rgba(0, 0, 0, 0.35);
  --scrim-40: rgba(0, 0, 0, 0.4);
  --scrim-50: rgba(0, 0, 0, 0.5);
  --scrim-60: rgba(0, 0, 0, 0.6);
  --scrim-70: rgba(0, 0, 0, 0.7);

  /* Sizing */
  --panel-padding: 12px;
  --panel-radius: 2px;
  --grid-gap: 8px;
  --font-size-base: 16px;
  --nav-height: 48px;
  --ticker-height: 26px;
  --topbar-height: 42px;
  --topbar-dropdown-gap: 8px;
  --banner-offset: 0px;
  --bottom-sai: env(safe-area-inset-bottom, 0px);
  --app-height: 100dvh;
}

html.pwa-standalone {
  --bottom-sai: 0px;
}

/* --- Themes --- */
html[data-theme="nebula"] {
  --bg-void: #0a0018;
  --bg-panel: #160830;
  --bg-surface: #1e0c42;
  --bg-hover: #2a1458;
  --bg-divider: #3d1f70;
  --cyan: #c084fc;
  --accent: #c084fc;
  --accent-rgb: 192, 132, 252;
  --text-primary: #e8d5f5;
  --green: #a78bfa;
  --red: #f472b6;
}

html[data-theme="solar"] {
  --bg-void: #0a0700;
  --bg-panel: #161000;
  --bg-surface: #221a00;
  --bg-hover: #332808;
  --bg-divider: #4a3a12;
  --cyan: #fbbf24;
  --accent: #fbbf24;
  --accent-rgb: 251, 191, 36;
  --text-primary: #fef3c7;
  --green: #34d399;
  --red: #fb923c;
}

/* --- Font Size --- */
html[data-fontsize="small"] { --font-size-base: 16px; }
html[data-fontsize="medium"] { --font-size-base: 17px; }
html[data-fontsize="large"] { --font-size-base: 19px; }

@media (display-mode: standalone) {
  :root {
    --bottom-sai: 0px;
  }
}

@media (min-width: 768px) {
  :root {
    --panel-padding: 16px;
    --grid-gap: 12px;
  }
}

@media (min-width: 1024px) {
  :root {
    --panel-padding: 20px;
    --panel-radius: 3px;
    --grid-gap: 16px;
    --nav-height: 48px;
  }
}