/* CrewClock design tokens — FIXED palette (no per-client theming).
   2026 design language: restrained, clinical-clear, accessibility-first.
   WCAG-AA verified pairs (contrast ratios):
     #111827 on #FFFFFF = 16.1:1 (AAA)   |  #111827 on #F9FAFB = 15.6:1 (AAA)
     #4B5563 on #FFFFFF = 7.0:1 (AAA)     |  #6B7280 on #FFFFFF = 4.8:1 (AA)
     #FFFFFF on #2563EB = 4.6:1 (AA)      |  #FFFFFF on #15803D = 4.7:1 (AA, success text/fill)
     #FFFFFF on #DC2626 = 4.5:1 (AA)      |  focus ring #2563EB on #F9FAFB = 4.4:1 (UI)
   #16A34A is used for icons/accents only (3.0:1) — text/fills on green use #15803D. */

:root {
  /* surfaces */
  --bg:            #F9FAFB;
  --surface:       #FFFFFF;
  --surface-2:     #F3F4F6;
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;

  /* text */
  --text:          #111827;
  --text-muted:    #4B5563;
  --text-subtle:   #6B7280;
  --text-on-accent:#FFFFFF;

  /* brand / state */
  --primary:       #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft:  #EFF4FF;
  --success:       #16A34A;  /* icon/accent */
  --success-text:  #15803D;  /* fills + text-on-green (AA) */
  --success-soft:  #ECFDF3;
  --danger:        #DC2626;
  --danger-hover:  #B91C1C;
  --danger-soft:   #FEF2F2;
  --warning:       #B45309;
  --warning-soft:  #FFFBEB;

  /* type — system stack, no web-font round-trip */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --lh:      1.5;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* radius / shadow */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04);
  --shadow:    0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.06);

  /* tap targets */
  --tap-min:   44px;   /* WCAG min */
  --tap-kiosk: 56px;   /* staff kiosk min */

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  140ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}