/* ============================================================
   base.css — ServiceFlow UI
   Reset · CSS custom properties · Typography · Body defaults
   ============================================================ */

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

/* ── Design tokens ── */
:root {
  /* Brand */
  --colour-brand:        #1e40af;
  --colour-brand-dark:   #1d3a9e;
  --colour-brand-light:  #dbeafe;
  --colour-brand-mid:    #2563eb;

  /* Neutrals */
  --colour-bg:           #f3f4f6;
  --colour-surface:      #ffffff;
  --colour-surface-dim:  #f9fafb;
  --colour-border:       #e5e7eb;
  --colour-border-mid:   #d1d5db;

  /* Text */
  --colour-text-primary:   #111827;
  --colour-text-secondary: #374151;
  --colour-text-muted:     #6b7280;
  --colour-text-faint:     #9ca3af;
  --colour-heading:        #1a1a2e;

  /* Semantic — success */
  --colour-success-bg:     #d1fae5;
  --colour-success-border: #6ee7b7;
  --colour-success-text:   #065f46;

  /* Semantic — error */
  --colour-error-bg:     #fee2e2;
  --colour-error-border: #fca5a5;
  --colour-error-text:   #991b1b;

  /* Semantic — info */
  --colour-info-bg:     #f0f4ff;
  --colour-info-border: #c7d2fe;
  --colour-info-text:   #1e40af;

  /* Pill colours */
  --pill-credits-bg:   #eeeeee;
  --pill-credits-text: #111111;
  --pill-bonus-bg:     #d1fae5;
  --pill-bonus-text:   #065f46;
  --pill-focus-bg:     #ede9fe;
  --pill-focus-text:   #5b21b6;
  --pill-nofocus-bg:   #fce7f3;
  --pill-nofocus-text: #9d174d;

  /* Strategy pill scale — dark to light */
  --pill-s0-bg: #111111; --pill-s0-text: #ffffff;
  --pill-s1-bg: #444444; --pill-s1-text: #ffffff;
  --pill-s2-bg: #888888; --pill-s2-text: #ffffff;
  --pill-s3-bg: #bbbbbb; --pill-s3-text: #111111;
  --pill-s4-bg: #dddddd; --pill-s4-text: #111111;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* Typography */
  --font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-base: 15px;
  --font-size-lg:  17px;
  --font-size-xl:  26px;
  --font-size-2xl: 30px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-mid:  0.2s ease;
}

/* ── Base styles ── */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  background: var(--colour-bg);
  color: var(--colour-text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--colour-heading);
  line-height: 1.2;
}

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--colour-brand-mid); }

/* ── Utility: visually hidden ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}