/* ============================================================
   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 TOKENS — see static/css/themes/*.css
   Each [data-theme="<name>"] block lives in its own file under
   static/css/themes/. Loaded individually from base.html so adding
   or removing a theme is a one-file change + a row in
   apps/accounts/themes.py. Dark is the implicit default (its file
   also targets `:root` so the page renders correctly before JS
   hydrates the saved theme on <html>).
   ============================================================ */

/* ============================================================
   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;
  }
}