/* ================================================================
   Design Tokens — CSS Custom Properties
   All color, spacing, typography, and effect tokens.
   This file MUST load first; every other stylesheet depends on it.
   ================================================================ */

:root {
  /* Surfaces (layered dark backgrounds, lightest = most elevated) */
  --bg: #141418;
  --surface: #1c1c24;
  --surface-2: #242430;
  --surface-3: #2c2c38;

  /* Borders */
  --border: rgba(255, 255, 255, .08);
  --border-2: rgba(255, 255, 255, .13);

  /* Text (opacity-based hierarchy) */
  --text: #f0f0f2;
  --text-2: rgba(255, 255, 255, .72);
  --text-3: rgba(255, 255, 255, .45);
  --text-4: rgba(255, 255, 255, .25);

  /* Accent — UniCrew Ruby */
  --accent: #e11d48;
  --accent-dim: #be123c;
  --accent-rgb: 225, 29, 72;
  --accent-light: rgba(225, 29, 72, .08);
  --accent-bg: rgba(225, 29, 72, .06);

  /* Semantic colors */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, .1);
  --success-border: rgba(52, 211, 153, .25);

  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, .1);
  --warning-border: rgba(251, 191, 36, .25);

  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, .1);
  --danger-border: rgba(248, 113, 113, .25);

  --unknown: #a78bfa;
  --unknown-bg: rgba(167, 139, 250, .1);
  --unknown-border: rgba(167, 139, 250, .25);

  /* Radii */
  --radius: 10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow: 0 2px 8px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);

  /* Typography */
  --font: 'Outfit', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* Transitions & Effects */
  --ease: .18s ease;
  --glow: 0 0 20px rgba(225, 29, 72, .08);
}

/* ----------------------------------------------------------------
   Light Theme Overrides
   ---------------------------------------------------------------- */
[data-theme="light"] {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f0f0f2;
  --surface-3: #e8e8ec;

  --border: rgba(0, 0, 0, .08);
  --border-2: rgba(0, 0, 0, .12);

  --text: #1a1a2e;
  --text-2: rgba(0, 0, 0, .72);
  --text-3: rgba(0, 0, 0, .5);
  --text-4: rgba(0, 0, 0, .3);

  --accent-light: rgba(225, 29, 72, .06);
  --accent-bg: rgba(225, 29, 72, .04);

  --success-bg: rgba(52, 211, 153, .08);
  --success-border: rgba(52, 211, 153, .2);

  --warning-bg: rgba(251, 191, 36, .08);
  --warning-border: rgba(251, 191, 36, .2);

  --danger-bg: rgba(248, 113, 113, .08);
  --danger-border: rgba(248, 113, 113, .2);

  --unknown-bg: rgba(167, 139, 250, .08);
  --unknown-border: rgba(167, 139, 250, .2);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .08);

  --glow: 0 0 20px rgba(225, 29, 72, .04);
}