/* ============================================================
   OMETEK — Design Tokens
   Ported from the Ometek Academy Design System.
   Keep this file the single source of truth for color/type/space.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Lime — primary action / accept */
  --brand-lime-50:  #ecfff4;
  --brand-lime-100: #d0ffe2;
  --brand-lime-200: #9effc1;
  --brand-lime-300: #5cff95;
  --brand-lime-400: #22f06a;
  --brand-lime-500: #00d84f;
  --brand-lime-600: #00b241;
  --brand-lime-700: #008a34;
  --brand-lime-800: #046b2c;
  --brand-lime-900: #073e1c;

  /* Magenta — combos / fix-needed urgency */
  --brand-magenta-50:  #fff0f9;
  --brand-magenta-100: #ffd6ef;
  --brand-magenta-200: #ffa6dc;
  --brand-magenta-300: #ff62c0;
  --brand-magenta-400: #ff2ea8;
  --brand-magenta-500: #ff0a8a;
  --brand-magenta-600: #db0070;
  --brand-magenta-700: #a8005a;
  --brand-magenta-800: #7a0042;
  --brand-magenta-900: #4a0028;

  /* Cyan — info / HUD */
  --brand-cyan-50:  #ecfbff;
  --brand-cyan-100: #cdf3ff;
  --brand-cyan-200: #9ce8ff;
  --brand-cyan-300: #56d8ff;
  --brand-cyan-400: #22c4f0;
  --brand-cyan-500: #00a8d8;
  --brand-cyan-600: #0086b3;
  --brand-cyan-700: #006888;
  --brand-cyan-800: #08506b;
  --brand-cyan-900: #08323f;

  /* Gold — pending / awaiting / streak */
  --brand-gold-50:  #fff9e5;
  --brand-gold-100: #fff1b8;
  --brand-gold-200: #ffe174;
  --brand-gold-300: #ffcc2e;
  --brand-gold-400: #ffb800;
  --brand-gold-500: #f59e00;
  --brand-gold-600: #c47a00;
  --brand-gold-700: #955b00;
  --brand-gold-800: #6b4100;
  --brand-gold-900: #402600;

  /* Violet — boss / admin-solved */
  --brand-violet-50:  #f4efff;
  --brand-violet-100: #e2d6ff;
  --brand-violet-200: #c5abff;
  --brand-violet-300: #a07cff;
  --brand-violet-400: #7e54ff;
  --brand-violet-500: #6434ff;
  --brand-violet-600: #4d1eea;
  --brand-violet-700: #3b15b8;
  --brand-violet-800: #2a0f85;
  --brand-violet-900: #1a0857;

  /* Red — rejected / overdue / wrong */
  --brand-red-400: #ff5060;
  --brand-red-500: #ff2b3e;
  --brand-red-600: #e00020;
  --brand-red-700: #a3000f;

  /* Tier scale (for future rank-shield use) */
  --tier-wood:        #8a6a4d;
  --tier-bronze:      #c77a3c;
  --tier-silver:      #b6c2cd;
  --tier-gold:        #ffbf1f;
  --tier-platinum:    #6fe0c8;
  --tier-diamond:     #5eb7ff;
  --tier-master:      #b06bff;
  --tier-grandmaster: #ff3b5c;
  --tier-legend:      #ff00c8;

  /* Cool blue-gray neutrals */
  --ink-0:   #ffffff;
  --ink-25:  #f6f8fb;
  --ink-50:  #eef1f7;
  --ink-100: #dde3ee;
  --ink-200: #bbc5d6;
  --ink-300: #8d99af;
  --ink-400: #66728a;
  --ink-500: #4a5569;
  --ink-600: #343c4d;
  --ink-700: #242a37;
  --ink-800: #161b26;
  --ink-900: #0c0f17;
  --ink-950: #06080d;

  /* Type families */
  --font-display: 'Chakra Petch', 'Sora', system-ui, sans-serif;
  --font-sans:    'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Type scale */
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line heights & tracking */
  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-wide:    0.04em;
  --ls-mega:    0.14em;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* Motion */
  --ease-standard:  cubic-bezier(.4,.0,.2,1);
  --ease-emphasize: cubic-bezier(.2,.8,.2,1);
  --ease-bounce:    cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}

/* ============================================================
   THEME: DARK (default)
   ============================================================ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-0:     var(--ink-950);
  --bg-1:     var(--ink-900);
  --bg-2:     var(--ink-800);
  --bg-3:     var(--ink-700);
  --bg-inset: #04060b;
  --bg-sheen: rgba(255,255,255,0.04);

  --fg-1: #f5f8ff;
  --fg-2: #b3bccf;
  --fg-3: #717c96;
  --fg-4: #4a556c;
  --fg-on-brand: #06140a;

  --line-1:     rgba(255,255,255,0.06);
  --line-2:     rgba(255,255,255,0.10);
  --line-3:     rgba(255,255,255,0.18);
  --line-focus: var(--brand-lime-400);

  --accent:       var(--brand-lime-400);
  --accent-hover: var(--brand-lime-300);
  --accent-press: var(--brand-lime-500);
  --accent-soft:  rgba(34,240,106,0.14);
  --accent-ring:  rgba(34,240,106,0.45);

  --hot:        var(--brand-magenta-400);
  --hot-soft:   rgba(255,46,168,0.14);

  --info:       var(--brand-cyan-400);
  --info-soft:  rgba(34,196,240,0.14);

  --xp:         var(--brand-gold-400);
  --xp-soft:    rgba(255,184,0,0.16);

  --warn:       var(--brand-gold-400);
  --warn-soft:  rgba(255,184,0,0.16);

  --danger:      var(--brand-red-500);
  --danger-soft: rgba(255,43,62,0.16);

  --boss:       var(--brand-violet-400);
  --boss-soft:  rgba(126,84,255,0.16);

  --logoPrimary:   var(--brand-lime-400);
  --logoSecondary: #f5f7fb;

  --glow-lime:    0 0 0 1px rgba(34,240,106,0.30), 0 0 24px -4px rgba(34,240,106,0.55);
  --glow-magenta: 0 0 0 1px rgba(255,46,168,0.30), 0 0 24px -4px rgba(255,46,168,0.55);
  --glow-cyan:    0 0 0 1px rgba(34,196,240,0.30), 0 0 24px -4px rgba(34,196,240,0.55);
  --glow-gold:    0 0 0 1px rgba(255,184,0,0.35),  0 0 24px -4px rgba(255,184,0,0.60);

  --shadow-xs: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow-lg: 0 20px 48px -12px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06) inset;
  --shadow-pop: 0 0 0 1px rgba(255,255,255,0.08), 0 22px 50px -16px rgba(0,0,0,0.85);

  --grid-color: rgba(255,255,255,0.035);
  --grid-size:  28px;

  --grad-brand: linear-gradient(135deg, #22f06a 0%, #00d8a8 100%);
  --grad-hot:   linear-gradient(135deg, #ff2ea8 0%, #ff5060 100%);
  --grad-hud:   linear-gradient(135deg, #22c4f0 0%, #7e54ff 100%);
  --grad-xp:    linear-gradient(90deg,  #ffb800 0%, #ff2ea8 100%);
}

/* ============================================================
   THEME: LIGHT (kept for future toggle)
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  --bg-0:     #f3f5fa;
  --bg-1:     #ffffff;
  --bg-2:     #ffffff;
  --bg-3:     #eef1f7;
  --bg-inset: #0c0f17;
  --bg-sheen: rgba(0,0,0,0.03);

  --fg-1: #0c0f17;
  --fg-2: #343c4d;
  --fg-3: #66728a;
  --fg-4: #9aa3b5;
  --fg-on-brand: #06140a;

  --line-1:     rgba(12,15,23,0.06);
  --line-2:     rgba(12,15,23,0.10);
  --line-3:     rgba(12,15,23,0.18);
  --line-focus: var(--brand-lime-600);

  --accent:       var(--brand-lime-600);
  --accent-hover: var(--brand-lime-500);
  --accent-press: var(--brand-lime-700);
  --accent-soft:  rgba(0,178,65,0.12);
  --accent-ring:  rgba(0,178,65,0.35);

  --hot:        var(--brand-magenta-600);
  --hot-soft:   rgba(219,0,112,0.10);
  --info:       var(--brand-cyan-600);
  --info-soft:  rgba(0,134,179,0.10);
  --xp:         var(--brand-gold-600);
  --xp-soft:    rgba(196,122,0,0.14);
  --warn:       var(--brand-gold-600);
  --warn-soft:  rgba(196,122,0,0.14);
  --danger:     var(--brand-red-600);
  --danger-soft: rgba(224,0,32,0.10);
  --boss:       var(--brand-violet-600);
  --boss-soft:  rgba(77,30,234,0.10);

  --logoPrimary:   var(--brand-lime-600);
  --logoSecondary: #0c0f17;

  --shadow-xs: 0 1px 0 rgba(12,15,23,0.04);
  --shadow-sm: 0 1px 2px rgba(12,15,23,0.06), 0 1px 0 rgba(12,15,23,0.04);
  --shadow-md: 0 8px 20px -8px rgba(12,15,23,0.14);
  --shadow-lg: 0 24px 48px -16px rgba(12,15,23,0.18);

  --grid-color: rgba(12,15,23,0.05);
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size:   var(--fs-md);
  line-height: var(--lh-normal);
  color:       var(--fg-1);
  background:  var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

.num, .stat {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: var(--ls-tight);
}

.micro {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  font-family: var(--font-mono);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}