/* ═══════════════════════════════════════════════════════
   RYVEN — Global Root Variables
   Single source of truth for all tokens.
   Obsidian + Emerald + Bronze — restrained dark fantasy.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ─── Surfaces ─── */
  --ryven-void-black: #101214;
  --ryven-shadow-green: #1A1D1D;
  --ryven-dark-cloth: #232626;
  --ryven-dark-cloth-hover: #2B2E2E;

  /* ─── Text ─── */
  --ryven-bone: #EBEBE8;
  --ryven-bone-muted: #B4B6B0;
  --ryven-aged-iron: #87897F;
  --ryven-ash: #73756C;

  /* ─── Identity ─── */
  --ryven-ryven-green: #2D6B47;
  --ryven-relic-emerald: #47A472;
  --ryven-relic-emerald-dim: #35805A;
  --ryven-soul-cyan: #47A472;
  --ryven-soul-cyan-dim: #35805A;

  /* ─── Borders ─── */
  --ryven-border-dim: #323432;
  --ryven-border: #404240;
  --ryven-border-soft: #363836;
  --ryven-border-gold: #3D3D3D;
  --ryven-border-active: #47A472;
  --ryven-border-base: #2D2D2D;
  --ryven-border-muted: rgba(38, 38, 38, 0.6);

  /* ─── Feedback ─── */
  --ryven-ember: #47A472;
  --ryven-gold: #D3BD80;
  --ryven-bronze: #8F6843;
  --ryven-blood-red: #9E4444;

  /* ─── Upgrade state (matches in-game yellow/gold convention) ─── */
  --ryven-upgrade-gold: #D3BD80;
  --ryven-upgrade-gold-bright: #EDD48A;
  --ryven-upgrade-glow: rgba(199, 176, 106, 0.28);

  /* ─── Fonts ─── */
  --ryven-font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --ryven-font-body: 'Montserrat', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ─── Font Sizes ─── */
  --ryven-text-xs: 0.6875rem;
  --ryven-text-sm: 0.8125rem;
  --ryven-text-base: 0.9375rem;
  --ryven-text-lg: 1.0625rem;
  --ryven-text-xl: 1.25rem;
  --ryven-text-2xl: 1.5rem;
  --ryven-text-3xl: 1.875rem;
  --ryven-text-4xl: 2.25rem;
  --ryven-text-5xl: 3rem;
  --ryven-text-6xl: 4rem;

  /* ─── Font Weights ─── */
  --ryven-weight-regular: 400;
  --ryven-weight-medium: 500;
  --ryven-weight-semibold: 600;
  --ryven-weight-bold: 700;
  --ryven-weight-black: 900;

  /* ─── Spacing ─── */
  --ryven-space-xs: 4px;
  --ryven-space-sm: 8px;
  --ryven-space-md: 16px;
  --ryven-space-lg: 24px;
  --ryven-space-xl: 32px;
  --ryven-space-2xl: 48px;
  --ryven-space-3xl: 64px;

  /* ─── Border Radius ─── */
  --ryven-radius-sm: 4px;
  --ryven-radius-md: 8px;
  --ryven-radius-lg: 12px;
  --ryven-radius-xl: 16px;

  /* ─── Shadows ─── */
  --ryven-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --ryven-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.5);
  --ryven-shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6);
  --ryven-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  --ryven-shadow-emerald: 0 0 20px rgba(59, 143, 99, 0.08);

  /* ─── Transitions ─── */
  --ryven-transition-fast: 140ms ease-out;
  --ryven-transition-base: 200ms ease-out;
  --ryven-transition-slow: 420ms ease-out;
  --ryven-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ryven-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* ─── Z-Index Scale ─── */
  --ryven-z-base: 1;
  --ryven-z-dropdown: 10;
  --ryven-z-sticky: 20;
  --ryven-z-overlay: 30;
  --ryven-z-modal: 40;
  --ryven-z-toast: 50;

  /* ─── Grid ─── */
  --ryven-grid-max: 1440px;
  --ryven-grid-gutter: 24px;
  --ryven-grid-columns: 12;

  /* ─── Layout ─── */
  --ryven-nav-height: 92px;
  --ryven-sidebar-width: 340px;
  --ryven-mobile-bottom: 64px;

  /* ─── Theme ─── */
  color-scheme: dark;
}