/* =============================================================================
   BLACK FORGE // SLATE DESIGN SYSTEM (UNREAL ENGINE & DCC SLATE TOKENS)
   Centralized design tokens for blckfrg.xyz
   ============================================================================= */

:root {
  /* Surfaces & Backgrounds */
  --bg-window: #121212;
  --bg-panel: #181818;
  --bg-card: #1e1e1e;
  --bg-card-hover: #232323;
  --bg-inset: #131313;
  --bg-header: #161616;
  
  /* Borders & Dividers */
  --border-default: #2c2c2c;
  --border-subtle: #222222;
  --border-active: #444444;
  --border-focus: #4a5a70;
  --border-glow: rgba(110, 85, 185, 0.4);

  /* Typography Colors */
  --text-white: #ffffff;
  --text-primary: #e6e6e6;
  --text-secondary: #a3a3a3;
  --text-muted: #707070;
  --text-dim: #505050;

  /* Black Forge Brand Palette */
  --forge-purple-dark: #363262;
  --forge-purple: #6e55b9;
  --forge-purple-hover: #8266d4;
  --forge-purple-soft: #d1c4e9;
  --forge-purple-glow: rgba(110, 85, 185, 0.2);

  /* Unreal Slate Action Palette */
  --slate-btn-bg: #262f3a;
  --slate-btn-border: #3d4b5c;
  --slate-btn-hover: #323d4c;
  --slate-btn-hover-border: #52657d;
  --slate-btn-pressed: #1c232c;
  --slate-btn-text: #f0f4f8;

  /* Neutral Action Palette */
  --btn-neutral-bg: #222222;
  --btn-neutral-border: #333333;
  --btn-neutral-hover: #2a2a2a;
  --btn-neutral-hover-border: #444444;

  /* DCC Diagnostic & Status Indicators */
  --status-success: #7fb08c;
  --status-success-bg: rgba(127, 176, 140, 0.12);
  --status-success-border: rgba(127, 176, 140, 0.3);

  --status-warning: #dca868;
  --status-warning-bg: rgba(220, 168, 104, 0.12);
  --status-warning-border: rgba(220, 168, 104, 0.3);

  --status-info: #6da4d6;
  --status-info-bg: rgba(109, 164, 214, 0.12);
  --status-info-border: rgba(109, 164, 214, 0.3);

  /* Typography Stacks */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Spacing Scale */
  --space-2xs: 0.2rem;
  --space-xs: 0.35rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-base: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Container & Layout */
  --container-max-w: 1200px;
  --header-height: 60px;

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-smooth: 0.25s ease;

  /* Slate Shadows & Insets */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-window: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--border-default);
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-plate: 0 20px 45px rgba(0, 0, 0, 0.9), 0 0 20px rgba(110, 85, 185, 0.2);
  --shadow-plate-hover: 0 25px 55px rgba(0, 0, 0, 0.95), 0 0 30px rgba(110, 85, 185, 0.35);
}