/* ==========================================================================
   RollSolo: The Iron Shore — Bespoke Nordic Dark-Fantasy Design System
   Theme: "Cold Iron & Torchlight"
   Citations: architecture §6.1, §6.2, §6.3, §27.2
   ========================================================================== */

/* Self-Hosted Privacy-First WOFF2 Typography */
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/eb-garamond-v27-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-v13-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-v18-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Backgrounds & Surfaces (Architecture §6.1) */
  --bg-void: #0d0f12;                 /* Deep Peat Charcoal */
  --surface-iron: #15191e;            /* Cold Iron Slate */
  --surface-iron-raised: #1c2228;     /* Forged Steel Plate */
  --surface-overlay: rgba(21, 25, 30, 0.96); /* High-alpha modal backdrop */

  /* Borders & Dividers */
  --border-iron: #2a323c;             /* Weathered Iron Rim */
  --border-iron-focus: #d47a32;       /* Torchlight Focus Ring */
  --border-iron-subtle: rgba(42, 50, 60, 0.6);

  /* Typography & Text Contrast (WCAG 2.1 AA / AAA) */
  --text-primary: #e8e4dc;           /* Bleached Bone / Vellum (13.5:1 AAA) */
  --text-secondary: #b0a998;         /* Linen / Cordage (6.2:1 AA) */
  --text-muted: #7a7466;             /* Peat Soot (4.6:1 AA) */

  /* Accents & Torchlight Flames */
  --accent-torch: #d47a32;           /* Pine Pitch Flame */
  --accent-torch-hover: #ea8c42;     /* Flare Torchlight */
  --accent-torch-glow: rgba(212, 122, 50, 0.18);
  --accent-torch-muted: #8c4a1e;

  /* Mechanical Dice Outcomes */
  --outcome-strong-hit: #4a9e86;     /* Frost Verdigris / Spruce (5.8:1 AA) */
  --outcome-weak-hit: #c98f3b;       /* Tarnished Brass (6.1:1 AA) */
  --outcome-miss: #a8383b;           /* Dried Blood (5.1:1 AA) */
  --outcome-match: #8a65a8;          /* Twilight Heather / Seiðr Mist (5.2:1 AA) */

  /* Typography Stacks */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-prose: 'EB Garamond', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Layout, Radii & Shadows */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.85);
  --shadow-torch: 0 0 20px rgba(212, 122, 50, 0.25);
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

/* Base Global Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background-color: var(--bg-void);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Accessibility Focus Ring (Architecture §6.3) */
:focus-visible {
  outline: 2px solid var(--border-iron-focus);
  outline-offset: 2px;
}

/* Vestibular & Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .meter-pulse, .gauge-pulse, .shimmer {
    animation: none !important;
    box-shadow: none !important;
  }
}

/* Typography Hierarchy */
h1, h2, h3, .heading-display {
  font-family: var(--font-display);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

h1 { font-size: 1.75rem; line-height: 1.25; }
h2 { font-size: 1.35rem; line-height: 1.3; }
h3 { font-size: 1.1rem; line-height: 1.35; }

p, .text-body {
  color: var(--text-secondary);
}

.saga-narrative {
  font-family: var(--font-prose);
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 68ch;
  color: var(--text-primary);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Screen Reader Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Starforged Sci-Fi Design System Tokens (WP-14 Phase 5)
   Theme: "The Forge: Stellar Dust & Plasma Drive"
   ========================================================================== */
[data-system="starforged"],
.theme-starforged {
  --accent-torch: #00bcd4;           /* Cyan / Ion Drive Glow */
  --accent-torch-hover: #26c6da;     /* Neon Cyan Flare */
  --accent-torch-glow: rgba(0, 188, 212, 0.22);
  --accent-torch-muted: #006064;
  --border-iron-focus: #00bcd4;
  --shadow-torch: 0 0 20px rgba(0, 188, 212, 0.25);
}