/* ═══════════════════════════════════════════════════════════════════════
   MIA Design System — colors & type tokens
   Lifted directly from frontend/src/design/tokens (palette C: warm-paper
   canvas, deep teal brand, amber accent, sage success).
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ─── Surfaces ─────────────────────────────── */
  --canvas:           #FCFBF8;  /* warm paper — default page background */
  --canvas-elevated:  #FFFFFF;  /* cards, modals, popovers */
  --canvas-sunken:    #F5F1EA;  /* secondary surfaces, table headers */

  /* ─── Ink ──────────────────────────────────── */
  --ink:              #1A1A1A;
  --ink-muted:        #6E665A;
  --ink-subtle:       #8B8579;
  --ink-inverse:      #FCFBF8;
  --ink-numeral:      var(--ink);

  /* ─── Lines ────────────────────────────────── */
  --line:             #EDE6D9;
  --line-strong:      #DCD4C8;

  /* ─── Brand — deep teal ────────────────────── */
  --brand-50:  #E7F0EF;
  --brand-100: #C9DDDA;
  --brand-200: #9FC0BB;
  --brand-300: #6FA098;
  --brand-400: #3F7F75;
  --brand-500: #0E5E5A;
  --brand-600: #0A4847;
  --brand-700: #073535;
  --brand:        var(--brand-500);
  --brand-soft:   var(--brand-50);
  --brand-strong: var(--brand-700);

  /* ─── Accent / warning — amber (shared) ────── */
  --accent-50:  #FBF1DE;
  --accent-100: #F4DDA8;
  --accent-300: #E2B468;
  --accent-500: #D89B5B;
  --accent-700: #A87432;
  --accent:       var(--accent-500);
  --accent-soft:  var(--accent-50);
  --warning:      var(--accent-500);
  --warning-soft: var(--accent-50);

  /* ─── Success — sage ───────────────────────── */
  --success-50:  #EEF5F0;
  --success-100: #C7DECE;
  --success-300: #7CA982;
  --success-500: #578764;
  --success-700: #3F6A4C;
  --success:      var(--success-500);
  --success-soft: var(--success-50);

  /* ─── Danger — warm red ────────────────────── */
  --danger-50:  #FBEDE9;
  --danger-100: #F4C7BB;
  --danger-300: #D87A60;
  --danger-500: #B05538;
  --danger-700: #823A24;
  --danger:      var(--danger-500);
  --danger-soft: var(--danger-50);

  /* ─── Info — muted blue (rare) ─────────────── */
  --info-50:  #E6EEF4;
  --info-500: #3D6B8B;
  --info:      var(--info-500);
  --info-soft: var(--info-50);

  /* Focus ring */
  --focus-ring: var(--brand-500);

  /* ─── Shift kinds (palette aligned to canvas C) ── */
  --shift-touring:               #3A7F75;
  --shift-touring-soft:          #E7F0EF;
  --shift-touring-strong:        #073535;
  --shift-oncall-weekday:        #B05538;
  --shift-oncall-weekday-soft:   #FBEDE9;
  --shift-oncall-weekday-strong: #823A24;
  --shift-oncall-weekend:        #8C2D56;
  --shift-oncall-weekend-soft:   #FAEDF2;
  --shift-oncall-weekend-strong: #5C1D38;
  --shift-permanence-pm:         #A87432;
  --shift-permanence-pm-soft:    #FBF1DE;
  --shift-permanence-pm-strong:  #6B4A1F;
  --shift-sleep-in:              #6E665A;
  --shift-sleep-in-soft:         #F5F1EA;
  --shift-sleep-in-strong:       #1A1A1A;
  --shift-consult:               #578764;
  --shift-consult-soft:          #EEF5F0;
  --shift-consult-strong:        #3F6A4C;
  --shift-free:                  #C9DDDA;
  --shift-free-soft:             #E7F0EF;
  --shift-free-strong:           #0A4847;
  --shift-time-off:              #D89B5B;
  --shift-time-off-soft:         #FBF1DE;
  --shift-time-off-strong:       #A87432;
  --shift-late:                  #6E5B8B;
  --shift-late-soft:             #ECE7F2;
  --shift-late-strong:           #4A3D5E;

  /* ─── Type families ────────────────────────── */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ─── Type scale (size / line-height) ──────── */
  --text-display:    2.25rem;  --text-display-lh:  1.15;
  --text-h1:         1.75rem;  --text-h1-lh:       1.2;
  --text-h2:         1.375rem; --text-h2-lh:       1.25;
  --text-h3:         1.125rem; --text-h3-lh:       1.3;
  --text-body:       1rem;     --text-body-lh:     1.5;
  --text-body-sm:    0.875rem; --text-body-sm-lh:  1.5;
  --text-caption:    0.75rem;  --text-caption-lh:  1.4;
  --text-numeral:    1rem;     --text-numeral-lh:  1;

  /* ─── Spacing — 4px base ───────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */

  /* ─── Radii ────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 9999px;

  /* ─── Elevation — warm-tinted shadows ──────── */
  --e-0: none;
  --e-1: 0 1px 2px rgba(20, 46, 39, 0.06);
  --e-2: 0 2px 8px rgba(20, 46, 39, 0.08);
  --e-3: 0 8px 24px rgba(20, 46, 39, 0.12);
  --e-4: 0 20px 48px rgba(20, 46, 39, 0.18);

  /* ─── Motion ───────────────────────────────── */
  --dur-instant:    80ms;
  --dur-fast:       160ms;
  --dur-base:       220ms;
  --dur-slow:       360ms;
  --dur-deliberate: 520ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0,   0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms;
    --dur-slow: 1ms;    --dur-deliberate: 1ms;
    --ease-standard: linear; --ease-emphasized: linear; --ease-decelerate: linear;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Semantic class layer — drop on a host element to inherit MIA defaults.
   ═══════════════════════════════════════════════════════════════════════ */

.mia {
  background-color: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mia .display { font-size: var(--text-display); line-height: var(--text-display-lh); letter-spacing: -0.025em; font-weight: 600; color: var(--ink); }
.mia h1, .mia .h1 { font-size: var(--text-h1); line-height: var(--text-h1-lh); letter-spacing: -0.02em; font-weight: 600; color: var(--ink); }
.mia h2, .mia .h2 { font-size: var(--text-h2); line-height: var(--text-h2-lh); letter-spacing: -0.015em; font-weight: 600; color: var(--ink); }
.mia h3, .mia .h3 { font-size: var(--text-h3); line-height: var(--text-h3-lh); letter-spacing: -0.01em; font-weight: 600; color: var(--ink); }
.mia p, .mia .body { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--ink); }
.mia .body-sm { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--ink); }
.mia .caption { font-size: var(--text-caption); line-height: var(--text-caption-lh); letter-spacing: 0.025em; color: var(--ink-muted); text-transform: uppercase; font-weight: 500; }
.mia .numeral { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-numeral); line-height: var(--text-numeral-lh); }
.mia code, .mia .mono { font-family: var(--font-mono); font-size: 0.9em; }

.mia .muted    { color: var(--ink-muted); }
.mia .subtle   { color: var(--ink-subtle); }
.mia .inverse  { color: var(--ink-inverse); }