/* =====================================================
   Convrt Sheet — Design Tokens (v2)
   Dark-first, both-mode-excellent, minimal, restrained.

   Tenancy model: coach instances override ONLY
     --rpe, --logo-url
   Everything else is locked to the parent brand.
   ===================================================== */

:root {
  /* -------------------------------------------------------------------
     RPE — oxblood. Two uses only, nowhere else:
       1. RPE selected-pill fill (white text on top)
       2. Letter badge text (on --surface-3 chip)
     -------------------------------------------------------------------- */
  --rpe: #9c1b2a;
  --rpe-ring: rgba(156, 27, 42, 0.4);
  --rpe-on: #ffffff;

  /* -------------------------------------------------------------------
     ACCENT — mode-tonal neutral.
     Dark:  soft off-white   Light: slate-graphite
     -------------------------------------------------------------------- */
  --accent: #d4d6dc;
  --accent-soft: rgba(212, 214, 220, 0.1);
  --accent-ring: rgba(212, 214, 220, 0.28);
  --accent-on: #0f1014;

  /* -------------------------------------------------------------------
     DARK MODE — default.
     -------------------------------------------------------------------- */
  --bg: #0f1014;
  --surface-1: #16181d;
  --surface-2: #1d2026;
  --surface-3: #262a30;
  --surface-4: #2e323a;

  --border: #262a30;
  --border-strong: #383c45;

  --text-1: #f2f3f5;
  --text-2: #a5a8b0;
  --text-3: #6f737b;

  --overlay: rgba(0, 0, 0, 0.55);
  --hover: rgba(255, 255, 255, 0.04);
  --press: rgba(255, 255, 255, 0.08);
  --separator: rgba(255, 255, 255, 0.06);

  /* -------------------------------------------------------------------
     SEMANTIC
     -------------------------------------------------------------------- */
  --success: #2eb872;
  --success-soft: rgba(46, 184, 114, 0.14);
  --success-on: #ffffff;
  --warning: #e0a93b;
  --warning-soft: rgba(224, 169, 59, 0.14);
  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --danger-on: #ffffff;
  --info: #4f8df7;
  --info-soft: rgba(79, 141, 247, 0.16);

  /* -------------------------------------------------------------------
     PRIMARY ACTION
     -------------------------------------------------------------------- */
  --btn-primary-bg: #d4d6dc;
  --btn-primary-fg: #0f1014;

  /* -------------------------------------------------------------------
     EQUIPMENT — IWF plate colors. Never theme these.
     -------------------------------------------------------------------- */
  --plate-25: #e53935;
  --plate-20: #1e88e5;
  --plate-15: #fdd835;
  --plate-10: #43a047;
  --plate-5: #ffffff;
  --plate-2_5: #e53935;
  --plate-1_25: #fdd835;

  /* -------------------------------------------------------------------
     TYPE
     -------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', Consolas, monospace;

  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 80px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* -------------------------------------------------------------------
     SPACING
     -------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -------------------------------------------------------------------
     RADII
     -------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* -------------------------------------------------------------------
     SHADOWS
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-ring: 0 0 0 3px rgba(255, 255, 255, 0.08);

  /* -------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =====================================================
   LIGHT MODE
   ===================================================== */
:root[data-mode='light'],
.light-mode {
  --bg: #fafafb;
  --surface-1: #ffffff;
  --surface-2: #f5f6f8;
  --surface-3: #eceef2;
  --surface-4: #e2e5ea;

  --border: #e4e6ea;
  --border-strong: #ccd0d6;

  --text-1: #14161a;
  --text-2: #565a62;
  --text-3: #888c95;

  --overlay: rgba(15, 16, 20, 0.4);
  --hover: rgba(0, 0, 0, 0.04);
  --press: rgba(0, 0, 0, 0.08);
  --separator: rgba(0, 0, 0, 0.07);

  --rpe: #9c1b2a;
  --rpe-ring: rgba(156, 27, 42, 0.3);

  --accent: #3f4651;
  --accent-soft: rgba(63, 70, 81, 0.1);
  --accent-ring: rgba(63, 70, 81, 0.22);
  --accent-on: #ffffff;

  --btn-primary-bg: #3f4651;
  --btn-primary-fg: #ffffff;

  --success: #1f9f5c;
  --success-soft: rgba(31, 159, 92, 0.12);
  --danger: #c5161b;
  --danger-soft: rgba(197, 22, 27, 0.1);
  --warning: #b57e1f;
  --info: #2c6fe0;
  --info-soft: rgba(44, 111, 224, 0.12);

  --shadow-sm: 0 1px 2px rgba(15, 16, 20, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 16, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 16, 20, 0.1);
  --shadow-xl: 0 24px 64px rgba(15, 16, 20, 0.14);
}