/* ============================
   FocusNebula — Design Tokens
   ============================ */

:root {
  /* Fonts */
  --font: 'Outfit', sans-serif;
  --font-mono: 'Space Grotesk', sans-serif;

  /* Base Colors */
  --bg: #0A0D14;
  --bg2: #121622;
  --bg3: #181D2D;
  --text: #F8FAFC;
  --text-muted: #94A3B8;
  --text-helper: rgba(255,255,255,0.45);
  
  /* Fallback Accent (overridden dynamically by clan.js) */
  --accent: #FFFFFF;
  --accent-rgb: 255, 255, 255;
  --glow: rgba(255, 255, 255, 0.35);
  --card-gradient: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);

  /* UI Tokens */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 50px;
  --panel-padding: 32px;
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px var(--glow);

  /* Typographic Scale */
  --text-hero-size: 84px;
  --text-hero-weight: 300;
  --text-display-size: 44px;
  --text-display-weight: 400;
  --text-heading-size: 28px;
  --text-heading-weight: 500;
  --text-title-size: 18px;
  --text-title-weight: 600;
  --text-body-size: 15px;
  --text-body-weight: 400;
  --text-caption-size: 12px;
  --text-caption-weight: 500;
}

/* Typography utility classes */
.text-hero { font-size: var(--text-hero-size); font-weight: var(--text-hero-weight); }
.text-display { font-size: var(--text-display-size); font-weight: var(--text-display-weight); }
.text-heading { font-size: var(--text-heading-size); font-weight: var(--text-heading-weight); }
.text-title { font-size: var(--text-title-size); font-weight: var(--text-title-weight); }
.text-body { font-size: var(--text-body-size); font-weight: var(--text-body-weight); }
.text-caption { font-size: var(--text-caption-size); font-weight: var(--text-caption-weight); }

.rank-emblem {
  width: 100%;
  height: 100%;
  display: block;
}