/* =========================================
   GYM PROFIT GUARD — CONTROL ROOM THEME
   Authoritative token file
   This is the ONLY place hex values live.
========================================= */

:root {

  /* ========================
     SPACING (8pt grid)
  ======================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* ========================
     TYPOGRAPHY (font sizes)
  ======================== */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: 24px;
  --font-2xl: 28px;
  --font-xl: 40px;
  --font-display: 48px;

  /* ========================
     RADIUS
  ======================== */
  --radius-sm: 8px;   /* buttons, inputs */
  --radius-md: 10px;  /* cards */
  --radius-lg: 12px;  /* large panels max */

  /* ========================
     ELEVATION (LIGHT)
  ======================== */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,.08);
  --shadow-3: 0 8px 24px rgba(0,0,0,.12);

  /* ========================
     PRIMARY — CAPITAL BLUE
  ======================== */
  --primary-700: #172554;
  --primary-600: #1E3A8A;
  --primary-500: #1D4ED8;
  --primary-soft: #E8EEFF;
  --text-on-primary: #ffffff;

  /* ========================
     ACCENT — INTELLIGENCE MINT
  ======================== */
  --accent-600: #14B8A6;
  --accent-500: #2DD4BF;
  --accent-soft: #E6FFFB;

  /* ========================
     STATUS COLORS
  ======================== */
  --success-600: #15803D;
  --success-soft: #F0FDF4;

  --warning-600: #B45309;
  --warning-soft: #FFF7ED;

  --danger-600: #B91C1C;
  --danger-soft: #FEF2F2;

  /* ========================
     LIGHT MODE BASE
  ======================== */
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #EEF1F6;
  --border: #D8DEE8;

  --text: #0B1220;
  --text-muted: #5B677A;

  /* ========================
     TEAM PRESET PALETTE
  ======================== */
  --preset-cyan: #22D3EE;
  --preset-orange: #FB923C;
  --preset-slate: #94A3B8;
}

html[data-theme="dark"] {

  /* ========================
     DARK BASE
  ======================== */
  --bg: #0A0F1C;
  --surface: #111827;
  --surface-2: #162034;
  --border: #1F2A44;

  --text: #E5E7EB;
  --text-muted: #94A3B8;

  /* ========================
     PRIMARY (brightened for contrast)
  ======================== */
  --primary-600: #3B82F6;
  --primary-500: #2563EB;
  --primary-soft: rgba(59,130,246,0.12);

  /* ========================
     STATUS (dark adjustments)
  ======================== */
  --success-soft: rgba(34,197,94,0.12);
  --warning-soft: rgba(245,158,11,0.12);
  --danger-soft: rgba(239,68,68,0.12);

  /* ========================
     ELEVATION (dark)
  ======================== */
  --shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --shadow-2: 0 4px 12px rgba(0,0,0,.35);
  --shadow-3: 0 8px 24px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark) {
  /* NOTE: Variables below mirror html[data-theme="dark"] above.
     Keep both blocks in sync when adding or changing dark mode tokens. */
  html:not([data-theme="light"]) {

    /* ========================
       DARK BASE
    ======================== */
    --bg: #0A0F1C;
    --surface: #111827;
    --surface-2: #162034;
    --border: #1F2A44;

    --text: #E5E7EB;
    --text-muted: #94A3B8;

    /* ========================
       PRIMARY (brightened for contrast)
    ======================== */
    --primary-600: #3B82F6;
    --primary-500: #2563EB;
    --primary-soft: rgba(59,130,246,0.12);

    /* ========================
       STATUS (dark adjustments)
    ======================== */
    --success-soft: rgba(34,197,94,0.12);
    --warning-soft: rgba(245,158,11,0.12);
    --danger-soft: rgba(239,68,68,0.12);

    /* ========================
       ELEVATION (dark)
    ======================== */
    --shadow-1: 0 1px 2px rgba(0,0,0,.25);
    --shadow-2: 0 4px 12px rgba(0,0,0,.35);
    --shadow-3: 0 8px 24px rgba(0,0,0,.45);
  }
}