/* ── Reset & CSS variables ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand palette */
  --color-primary:       #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-danger:        #dc2626;
  --color-danger-hover:  #b91c1c;
  --color-warning:       #d97706;
  --color-success:       #16a34a;

  /* Shift type colours */
  --shift-day:    #2563eb;
  --shift-oncall: #d97706;
  --shift-anw:    #9f1239;

  /* Neutrals */
  --color-bg:        #f8fafc;
  --color-surface:   #ffffff;
  --color-border:    #e2e8f0;
  --color-text:      #0f172a;
  --color-muted:     #64748b;
  --color-subtle:    #f1f5f9;

  /* ── Status vs. category tokens ──────────────────────────────────────────
     Design-language rule (see CHANGELOG.md "Anesthesiologist clarity pass"):
     a colour either says HOW something is doing (status — severity/outcome)
     or WHAT KIND of thing it is (category — an identity, no judgement
     attached). The two families are never used interchangeably: category
     tokens are deliberately muted/tonal so a wish-type or shift-type badge
     never reads as an alert next to a real status badge. */

  /* Status — aliases onto the existing brand hues above, so "is this a
     status colour" is a naming question, not a new value to maintain. */
  --status-danger:  var(--color-danger);
  --status-warning: var(--color-warning);
  --status-success: var(--color-success);
  --status-info:    var(--color-primary);
  --status-neutral: var(--color-muted);
  --status-danger-bg:  #fee2e2;
  --status-warning-bg: #fef3c7;
  --status-success-bg: #dcfce7;
  --status-info-bg:    #dbeafe;
  --status-neutral-bg: var(--color-subtle);

  /* Category — five tonal identities for recurring "what kind of thing is
     this" badges: preferred-off wishes / ANW shifts (rose), day shifts /
     preferred-shift wishes (denim), on-call shifts (clay), holiday leave
     (moss), educational leave (plum). */
  --cat-rose:     #b3536e;
  --cat-rose-bg:  #f8ebef;
  --cat-denim:    #3d5f96;
  --cat-denim-bg: #eaf0f8;
  --cat-clay:     #a8752c;
  --cat-clay-bg:  #f6eedd;
  --cat-moss:     #4f7d57;
  --cat-moss-bg:  #eaf2ea;
  --cat-plum:     #8462a8;
  --cat-plum-bg:  #efe7f5;

  /* Location — up to eight fixed-order categorical hues for per-location
     identity (staffing-calendar.js's need-per-day badges). Deliberately
     separate from --cat-* above, which already carries specific meanings
     (shift-type/leave-type identity) elsewhere in the app. */
  --loc-1: #2a78d6; /* blue */
  --loc-2: #eb6834; /* orange */
  --loc-3: #1baf7a; /* aqua */
  --loc-4: #eda100; /* yellow */
  --loc-5: #e87ba4; /* magenta */
  --loc-6: #008300; /* green */
  --loc-7: #4a3aa7; /* violet */
  --loc-8: #e34948; /* red */

  /* Typography */
  --font: 'Inter', system-ui, sans-serif;
  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

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

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 2px 8px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  /* Transitions */
  --transition: 150ms ease;
}

/* ── Dark theme — variable overrides ────────────────────────────────────────── */
[data-theme="dark"] {
  /* Brand */
  --color-primary:       #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-danger:        #f87171;
  --color-danger-hover:  #fca5a5;
  --color-warning:       #fbbf24;
  --color-success:       #4ade80;

  /* Neutrals */
  --color-bg:      #0f172a;
  --color-surface: #1e293b;
  --color-border:  #334155;
  --color-text:    #f1f5f9;
  --color-muted:   #94a3b8;
  --color-subtle:  #1a2637;

  /* Category tokens — dark equivalents, same light-text-on-dark-tint pattern
     already used for badges elsewhere in components.css. */
  --cat-rose:     #e8a3b8;
  --cat-rose-bg:  #3a2530;
  --cat-denim:    #9db8e0;
  --cat-denim-bg: #202d40;
  --cat-clay:     #e0b876;
  --cat-clay-bg:  #3a2f18;
  --cat-moss:     #9ecaa4;
  --cat-moss-bg:  #1e3324;
  --cat-plum:     #c9a8dd;
  --cat-plum-bg:  #33243f;

  /* Location tokens — dark-stepped equivalents of the light --loc-* set above. */
  --loc-1: #3987e5;
  --loc-2: #d95926;
  --loc-3: #199e70;
  --loc-4: #c98500;
  --loc-5: #d55181;
  --loc-6: #008300;
  --loc-7: #9085e9;
  --loc-8: #e66767;

  --status-danger-bg:  #3d1515;
  --status-warning-bg: #3d2510;
  --status-success-bg: #143d25;
  --status-info-bg:    #1e3a5f;
  --status-neutral-bg: var(--color-subtle);

  /* Softer shadows on dark backgrounds */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow:    0 2px 8px rgba(0,0,0,.55);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.65);
}

html { font-size: 16px; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: var(--text-xl); font-weight: 700; }
h2 { font-size: var(--text-lg); font-weight: 600; }
h3 { font-size: var(--text-base); font-weight: 600; }

button, input, select, textarea {
  font: inherit;
  outline: none;
}

button { cursor: pointer; }

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-muted  { color: var(--color-muted); }
.text-danger { color: var(--color-danger); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-2xs    { font-size: var(--text-2xs); }
.mt-4        { margin-top: var(--space-4); }
.hidden      { display: none !important; }