:root {
  /* ================ Color palette ================ */
  /* Backgrounds — warm-black ladder, NOT pure #000 */
  --bg:            #0c0d10;   /* page bg */
  --surface-1:    #15161b;   /* default card */
  --surface-2:    #1c1e25;   /* elevated card / hero card base */
  --surface-3:    #24262f;   /* hover / focus */

  /* Borders + dividers */
  --border:        #2a2c36;
  --border-strong: #3a3d49;
  --divider:       #1f2129;

  /* Text */
  --text:          #f5f6f8;   /* primary */
  --text-mute:     #a4a8b3;   /* secondary */
  --text-dim:      #6b6f7a;   /* tertiary / disabled */

  /* Brand (Perham Yellow Jackets) */
  --accent:        #fbbf24;   /* primary yellow — softer than #facc15 */
  --accent-strong: #f59e0b;   /* hover / pressed */
  --accent-soft:   rgba(251, 191, 36, 0.12);  /* fill bg, glow */
  --accent-glow:   rgba(251, 191, 36, 0.25);

  /* Run type colors — used by the log list pills (NOT the type-tile icons,
   * which are monochrome grayscale; the active tile derives its color from
   * --accent). Adding/removing a type means touching log.css too. */
  --type-easy:     #4ade80;   /* green leaf */
  --type-tempo:    #fb923c;   /* orange flame */
  --type-interval: #f43f5e;   /* red lightning */
  --type-threshold:#facc15;   /* amber concentric */
  --type-rep:      #c084fc;   /* purple */
  --type-long:     #2dd4bf;   /* teal */
  --type-race:     #ef4444;   /* race red */
  --type-rest:     #6b7280;   /* neutral gray */
  --type-other:    #94a3b8;

  /* Semantic */
  --success:       #22c55e;
  --danger:        #ef4444;
  --warning:       #f59e0b;
  --info:          #38bdf8;

  /* Effort gradient (10 stops — distinct hue families per pair so adjacent
   * chips are visually separable at a glance). */
  --effort-1:      #06b6d4;   /* cyan — recovery */
  --effort-2:      #14b8a6;   /* teal */
  --effort-3:      #22c55e;   /* green */
  --effort-4:      #84cc16;   /* lime */
  --effort-5:      #facc15;   /* yellow */
  --effort-6:      #fb923c;   /* light orange */
  --effort-7:      #f97316;   /* orange */
  --effort-8:      #ef4444;   /* red */
  --effort-9:      #b91c1c;   /* deep red */
  --effort-10:     #581c87;   /* dark purple — all out */

  /* ================ Typography ================ */
  --font-sans:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   Inter, sans-serif;
  --font-mono:     'SF Mono', Menlo, 'Roboto Mono', Consolas, monospace;
  --font-display:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   Inter, sans-serif;

  /* Type scale (px) */
  --t-10: 10px;   /* micro labels, all-caps */
  --t-11: 11px;   /* meta */
  --t-12: 12px;   /* secondary body */
  --t-13: 13px;   /* small body */
  --t-14: 14px;   /* body */
  --t-16: 16px;   /* body large */
  --t-18: 18px;   /* h4 / card title */
  --t-22: 22px;   /* h3 / hero card title */
  --t-28: 28px;   /* h2 / page subtitle */
  --t-36: 36px;   /* big stat number */
  --t-44: 44px;   /* page title */
  --t-56: 56px;   /* display */

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;

  /* Letter spacing */
  --ls-tight:  -0.02em;   /* big display numbers */
  --ls-snug:   -0.01em;   /* headlines */
  --ls-normal: 0;
  --ls-wide:   0.05em;
  --ls-caps:   0.12em;    /* all-caps labels */

  /* ================ Spacing scale ================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;

  /* ================ Radii ================ */
  --r-sm: 6px;     /* tiny chips, inputs */
  --r-md: 10px;    /* default card / button */
  --r-lg: 14px;    /* hero card */
  --r-xl: 20px;
  --r-full: 999px; /* pills, avatars */

  /* ================ Shadows + elevation ================ */
  --elev-1: 0 1px 2px rgba(0,0,0,0.4);
  --elev-2: 0 4px 12px rgba(0,0,0,0.35);
  --elev-3: 0 8px 24px rgba(0,0,0,0.45);
  --glow-accent: 0 0 24px var(--accent-glow);

  /* ================ Motion ================ */
  --motion-fast:   120ms;
  --motion-base:   180ms;
  --motion-slow:   320ms;
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);

  /* ================ Gradients ================ */
  /* Hero card glow — subtle yellow wash on dark surface */
  --grad-hero: linear-gradient(135deg,
    rgba(251, 191, 36, 0.10) 0%,
    rgba(251, 191, 36, 0.02) 60%,
    transparent 100%);

  /* Subtle radial behind the active type tile */
  --grad-tile-active: radial-gradient(ellipse at top,
    rgba(251, 191, 36, 0.20) 0%,
    rgba(251, 191, 36, 0.04) 60%,
    transparent 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }