/* Gaffer IQ — base.css
   Reset, CSS variables (design tokens), typography.
   All colour, spacing, radius, font, and band tokens live here.
   Components reference var(--…) only; no raw hex or px literals elsewhere. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure the HTML `hidden` attribute wins even when an element has an
   explicit display property (e.g. display:flex on .ranker-loading). */
[hidden] { display: none !important; }

:root {
  /* --- Colour palette ---------------------------------------------------- */
  --color-bg:             #0d1117;
  --color-surface:        #161b22;
  --color-surface-raised: #1c2128;
  --color-border:         #30363d;
  --color-border-subtle:  #21262d;
  --color-text:           #e6edf3;
  --color-muted:          #8b949e;
  --color-accent:         #58a6ff;
  --color-accent-muted:   rgba(88, 166, 255, 0.10);

  /* --- Score band colours — one definition, used everywhere -------------- */
  --band-great:    #1f8c48;
  --band-good:     #3fb950;
  --band-neutral:  #6e7681;
  --band-tough:    #d29922;
  --band-brutal:   #f85149;

  /* --- Band background tints (card/chip backgrounds) --------------------- */
  --band-great-bg:   rgba(31, 140, 72,  0.15);
  --band-good-bg:    rgba(63, 185, 80,  0.12);
  --band-neutral-bg: rgba(110, 118, 129, 0.10);
  --band-tough-bg:   rgba(210, 153, 34,  0.12);
  --band-brutal-bg:  rgba(248, 81,  73,  0.12);

  /* --- Spacing scale (4-point grid) -------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Typography -------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.25rem;
  --font-size-xl:  1.5rem;
  --font-size-2xl: 2rem;

  /* --- Border radius ----------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* --- Estimated / provisional score tokens -------------------------------- */
  /* Used everywhere a score's confidence is below CONFIDENCE_FLOOR.          */
  --color-estimated:        #7a8390;   /* muted, slightly desaturated neutral */
  --estimated-border-style: dashed;    /* applied as border-style for estimated indicators */

  /* --- Position badge colours (ranker, dashboard, planner) --------------- */
  --pos-gkp: #f0c040;   /* golden yellow */
  --pos-def: #58a6ff;   /* sky blue  */
  --pos-mid: #a371f7;   /* purple    */
  --pos-fwd: #ff9f5b;   /* orange    */
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}