/**
 * FORRE_DARK - CSS Variables & Tokens
 * Alla färger, spacing, tokens centralt
 */

:root {
  /* ============================================
     PRIMARY COLORS
     ============================================ */
  --primary: #2796f2;
  --primary-hover: #1a7fd9;
  --primary-glow: rgba(39,150,242,0.50);

  /* ============================================
     BACKGROUND SURFACES (hierarki)
     ============================================ */
  --surface-1: #161616;  /* Body bg */
  --surface-2: #1a1a1a;  /* Card bg */
  --surface-3: #1b1b1b;  /* Card alt */
  --surface-4: #202020;  /* Input bg */
  --surface-5: #121212;  /* Topbar */

  /* Legacy aliases (kompatibilitet) */
  --body-bg: var(--surface-1);
  --card-bg: var(--surface-2);
  --card-bg-alt: var(--surface-3);
  --panel-bg: #171717;
  --input-bg: var(--surface-4);
  --topbar-bg: var(--surface-5);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.70);
  --text-tertiary: rgba(255,255,255,0.40);
  --text-muted: #777777;

  /* ============================================
     BORDERS & DIVIDERS
     ============================================ */
  --border: #333333;
  --border-light: #2a2a2a;
  --border-dark: #2f2f2f;
  --divider: #2d2d2d;

  /* ============================================
     TINT-BAKGRUNDER (transparanta färger för widget-sidor)
     ============================================ */
  --tint-blue: rgba(39,150,242, 0.08);   /* hub / primary */
  --tint-green: rgba(34,197,94, 0.08);   /* lfg / live */
  --tint-warning: rgba(245,158,11, 0.08); /* events / leaderboard */
  --tint-purple: rgba(168,85,247, 0.08); /* progress / xp */
  --tint-danger: rgba(231,76,60, 0.08);  /* error / alert */

  /* ============================================
     STATUS COLORS
     ============================================ */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #e74c3c;
  --error: #e74c3c;

  /* ============================================
     RADIUS
     ============================================ */
  --radius: 4px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 20px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-default: 0 10px 24px rgba(0,0,0,0.28);
  --shadow-hover: 0 18px 40px rgba(0,0,0,0.55);
  --shadow-button: 0 14px 28px rgba(0,0,0,0.35);
  --shadow-navbar: 0 14px 28px rgba(0,0,0,0.35);
  --shadow-topbar: 0 10px 24px rgba(0,0,0,0.45);
  --shadow-dropdown: 0 18px 38px rgba(0,0,0,0.45);

  /* ============================================
     SURFACE CONTRAST — wider spread for depth
     ============================================ */
  --surface-2b: #222222;   /* Lighter card bg for contrast */
  --surface-6:  #282828;   /* Elevated surfaces */
  --border-active: #3a3a3a;

  /* Stronger tints for active/focused states */
  --tint-blue-strong:   rgba(39,150,242,0.15);
  --tint-green-strong:  rgba(34,197,94,0.15);
  --tint-warning-strong:rgba(245,158,11,0.15);
  --tint-purple-strong: rgba(168,85,247,0.15);
  --tint-danger-strong: rgba(231,76,60,0.15);

  /* ============================================
     LAYOUT
     ============================================ */
  --max-width: 1200px;
  --navbar-height: 58px;

  /* ============================================
     WIDGET TOKENS
     ============================================ */
  --widget-header-height: 36px;
  --widget-body-padding: 12px;
  --widget-footer-padding: 8px 12px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-speed: 0.12s ease;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-family: 'Roboto', sans-serif;
  --font-size-sm: 12px;
  --font-size-base: 14px;

  /* ============================================
     COMPATIBILITY ALIASES
     ============================================ */
  --bg-card: var(--card-bg);
  --bg-body: var(--body-bg);
  --border-color: var(--border);
  --text-main: var(--text-primary);
  --text-muted-alt: var(--text-muted);
  --spacing-lg: 20px;
  --spacing-sm: 12px;
  --radius-xl: var(--radius-lg);
  --radius-md: var(--radius);
  --shadow-elevated: var(--shadow-default);
  --shadow-glow-blue: 0 0 20px rgba(39,150,242,0.30);
  --fn-blue: var(--primary);
}