/* ============================================================================
   The AI Sprint - design tokens
   ----------------------------------------------------------------------------
   One token set, two surfaces. Employee screens run [data-mode="arena"]: dark,
   loud, built for a phone held at arm's length in a busy room. Admin screens run
   [data-mode="console"]: light, dense, built for reading a thousand rows.
   Both resolve the same semantic names, so components are written once.

   Palette is sampled directly from the Nice Wings 2026 event banner:
   violet #7D00FE at the left of the gradient, blue #0183FF at the right.
   ========================================================================== */

:root {
  /* ---- brand ramp (violet) ------------------------------------------- */
  --brand-50:  #f5edff;
  --brand-100: #eadaff;
  --brand-200: #d5b5ff;
  --brand-300: #bc8aff;
  --brand-400: #a053ff;
  --brand-500: #7d00fe;
  --brand-600: #6a00d6;
  --brand-700: #5500ab;
  --brand-800: #430086;
  --brand-900: #320066;

  /* ---- accent (the blue end of the brand gradient) -------------------- */
  --accent-300: #7fc0ff;
  --accent-400: #4da3ff;
  --accent-500: #0183ff;
  --accent-600: #0168cc;

  /* The gradient is the strongest brand signal. Used once per screen, never
     as decoration on every element. */
  --brand-gradient: linear-gradient(100deg, #7d00fe, #0183ff);

  --neutral-0:   #ffffff;
  --neutral-25:  #fcfcfd;
  --neutral-50:  #f7f8fa;
  --neutral-100: #eef0f4;
  --neutral-200: #e0e3ea;
  --neutral-300: #c6ccd8;
  --neutral-400: #98a1b3;
  --neutral-500: #6b7488;
  --neutral-600: #4d5567;
  --neutral-700: #363c4c;
  --neutral-800: #232834;
  --neutral-850: #1a1e29;
  --neutral-900: #12151d;
  --neutral-950: #0a0c12;

  --success-400: #34d399;
  --success-500: #12b76a;
  --success-600: #0b8a50;
  --danger-400:  #f97066;
  --danger-500:  #e0402f;
  --danger-600:  #b32318;
  --warning-500: #f59404;
  --info-500:    #2e90fa;

  /* ---- type ---------------------------------------------------------- */
  /* Deliberately not Inter: it now reads as a generated-template default.
     --font-num carries tabular figures so live scores and countdowns do not
     reflow while they tick. */
  --font-sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num:  "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --text-xl:  clamp(1.25rem,  0.8vw + 1rem, 1.5rem);
  --text-2xl: clamp(1.5rem,   1.6vw + 1rem, 2rem);
  --text-3xl: clamp(1.875rem, 3vw + 1rem,   2.75rem);
  --text-4xl: clamp(2.5rem,   6vw + 1rem,   4rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* ---- space (4pt base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- radius: a hierarchy, not an arbitrary number per component ----- */
  --radius-control: 10px;
  --radius-card:    16px;
  --radius-hero:    24px;
  --radius-pill:    999px;

  /* ---- motion -------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 420ms;

  --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--focus-color);
  --tap-min: 44px;
}

/* ---------------------------------------------------------------------------
   Arena - employee, mobile, dark
   ------------------------------------------------------------------------- */
[data-mode="arena"] {
  color-scheme: dark;

  --surface-base:    var(--neutral-950);
  --surface-raised:  var(--neutral-900);
  --surface-overlay: var(--neutral-850);
  --surface-sunken:  #06070b;
  --surface-inverse: var(--neutral-0);

  --text-primary:   #f4f6fb;
  --text-secondary: var(--neutral-400);
  --text-muted:     var(--neutral-500);
  --text-inverse:   var(--neutral-900);
  --text-on-brand:  #ffffff;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --brand-solid:  var(--brand-500);
  --brand-hover:  var(--brand-400);
  --brand-quiet:  rgba(125, 0, 254, 0.18);
  --accent-solid: var(--accent-400);

  --success-text: var(--success-400);
  --success-bg:   rgba(18, 183, 106, 0.14);
  --danger-text:  var(--danger-400);
  --danger-bg:    rgba(224, 64, 47, 0.14);

  --focus-color: var(--brand-300);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 12px 32px -8px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------------------
   Console - admin, light, dense
   ------------------------------------------------------------------------- */
[data-mode="console"] {
  color-scheme: light;

  --surface-base:    var(--neutral-50);
  --surface-raised:  var(--neutral-0);
  --surface-overlay: var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--neutral-900);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-inverse:   var(--neutral-0);
  --text-on-brand:  #ffffff;

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);

  --brand-solid:  var(--brand-600);
  --brand-hover:  var(--brand-700);
  --brand-quiet:  var(--brand-50);
  --accent-solid: var(--accent-600);

  --success-text: var(--success-600);
  --success-bg:   #e6f9f0;
  --danger-text:  var(--danger-600);
  --danger-bg:    #fdecea;

  --focus-color: var(--brand-500);

  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow-lift: 0 12px 24px -8px rgba(16, 24, 40, 0.18);
}