/* =============================================
   SAFA WEB APP — Global CSS Custom Properties
   =============================================
   Single source of truth for all design tokens.
   Loaded in layouts/app.blade.php — do NOT
   redeclare these vars in individual blade files.
   ============================================= */

:root {
  /* Backgrounds */
  --bg:        #0a0a0a;
  --bg2:       #111111;
  --bg3:       #161616;

  /* Brand */
  --blue:      #0099ff;
  --blue-dim:  rgba(0,153,255,.12);
  --blue-glow: rgba(0,153,255,.35);

  /* Semantic */
  --green:     #219b72;
  --yellow:    #eab308;
  --orange:    #f97316;
  --red:       #ef4444;

  /* Medals */
  --gold:      #fbbf24;
  --silver:    #9ca3af;
  --bronze:    #d97706;

  /* Text */
  --white:     #ffffff;
  --muted:     #666666;
  --muted2:    #cac7c7;

  /* Borders & surfaces */
  --border-color: #17203b;
  --line:      rgba(255,255,255,.07);
  --glass:     linear-gradient(206deg, rgb(212 207 219 / 5%) 0%, rgb(177 177 177 / 5%) 50%, rgb(136 135 138 / 5%) 100%);

  /* Typography */
  --mono:      'Roboto Mono', monospace;
  --display:   'Bebas Neue', sans-serif;
  --body:      'Space Grotesk', sans-serif;
}

/* Global resets — no need to repeat per-page */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  color: var(--white);
  font-family: var(--body);
  margin: 0;
}