/* Design tokens shared by every page. Colours, sizes and layers live here and nowhere else:
   app.css only refers to them with var(--...), so a re-skin is a change to this file alone. */
:root {
  /* Surfaces */
  --color-bg: #f8fafc;
  --bg-pattern: url("/static/pills.svg"); /* falling-pills tile behind every page */
  --bg-pattern-size: 600px;
  --color-surface: #fff;
  --color-surface-muted: #f6f7f8;
  --color-surface-sunken: #eee;
  --color-hatch: #f7f7f7;

  /* Text */
  --color-text: #1e293b; /* deep navy */
  --color-text-strong: #334155;
  --color-text-muted: #64748b;
  --color-text-faint: #9aa0a6;
  --color-on-accent: #fff;

  /* Lines */
  --color-border: #d9dcdf;
  --color-border-strong: #bbb;
  --color-border-input: #999;

  /* Workplace colours on the shifts calendar: a strong colour (border, dot) and a soft one (fill). Calm, muted tones; one per
     workplace name (shifts.js hands them out in order of first appearance), so a name looks the same at every distribution point. */
  --workplace-0: #3f8f8a; /* teal */
  --workplace-0-soft: #dff1ef;
  --workplace-1: #8b78c8; /* lavender */
  --workplace-1-soft: #ebe6f7;
  --workplace-2: #d08a62; /* terracotta */
  --workplace-2-soft: #fae8dc;
  --workplace-3: #6fa05c; /* sage */
  --workplace-3-soft: #e5f1de;
  --workplace-4: #c4789a; /* dusty rose */
  --workplace-4-soft: #f7e3ec;
  --workplace-5: #6b8cba; /* slate blue */
  --workplace-5-soft: #e2eaf5;
  --workplace-6: #b59a62; /* sand */
  --workplace-6-soft: #f3ecdb;
  --workplace-7: #7d8896; /* grey */
  --workplace-7-soft: #e6e9ed;

  /* Brand: pharmacy blue */
  --color-accent: #005eb8;
  --color-accent-soft: #e8f1fa;
  --color-bad-bg: #ffedd5; /* bad slot blocks: orange */
  --color-bad-stripe: #fdba74;
  --color-bad: #ea580c;
  --color-bad-text: #7c2d12;
  --color-past: var(--color-surface); /* days that are over on the shifts calendar: the same surface as any day, their content fades instead (see .tl-elapsed) */
  --color-today: #f4f8fd; /* barely-there blue behind the present day on the shifts calendar */
  --color-accent-tint: #d0e3f5;

  /* Problems: understaffed gaps, errors, destructive actions */
  --color-gap: #b45309; /* amber, so an understaffed slot is not mistaken for the brand red */
  --color-short-min: #dc2626; /* shifts calendar: below the workplace minimum */
  --color-short-min-bg: rgba(220, 38, 38, .22);
  --color-short-min-text: #b91c1c;
  /* Charts: one blue for lines, columns and bars, and its sequential ramp (light to dark) for the heatmap. Validated against the
     surface; text never wears these, only the marks do. */
  --viz-1: #2a78d6;
  --viz-seq-1: #cde2fb;
  --viz-seq-2: #86b6ef;
  --viz-seq-3: #3987e5;
  --viz-seq-4: #1c5cab;
  --viz-seq-5: #0d366b;
  --color-good: #15803d; /* team stats: a change for the better */
  --color-short-optimal: #ca8a04; /* below the optimal headcount */
  --color-short-optimal-bg: rgba(234, 179, 8, .28);
  --color-short-optimal-text: #854d0e;
  --color-danger: #c81e1e;
  --color-danger-strong: #991b1b;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-invalid-bg: #fee2e2;
  --color-danger-bg-strong: #fecaca; /* pressed */

  /* Success: adding things */
  --color-warn-soft-bg: #fef3c7; /* soft pills that warn: a gap that stays uncovered */
  --color-warn-soft-text: #92400e;
  --color-success: #15803d;
  --color-success-bg: #dcfce7;
  --color-success-bg-strong: #bbf7d0; /* pressed */
  --color-success-border: #86efac;

  /* Information and notices */
  --color-info: #3b82c4;
  --color-info-bg: #eef5fb;
  --color-info-border: #cfe0f1;
  --color-info-text: #27455f;
  --color-notice-bg: #fff3cd;
  --color-notice-text: #664d03;

  /* Overlays */
  --color-toast: #1e293b;
  --color-scrim: rgb(0 0 0 / 45%);
  --color-shade: rgb(0 0 0 / 25%);
  --color-glass: rgb(255 255 255 / 88%);

  /* Job functions, used to tint shift blocks */
  --fn-pharmacist: #cfe3ff;
  --fn-pharmacy_technician: #d9f0d4;
  --fn-counter_assistant: #ffe6b8;
  --fn-delivery_driver: #e7d8f5;
  --fn-back_office: #d8ecec;

  /* Type */
  --font-body: system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-md: 0.95rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.4rem;

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

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --focus-ring: 2px solid var(--color-accent);

  /* Elevation */
  --shadow-bar: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-float: 0 4px 12px rgb(0 0 0 / 28%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 5%), 0 2px 10px rgb(0 0 0 / 4%); /* the start page's cards: a faint shadow instead of an outline */
  --shadow-lift: 0 2px 8px rgb(0 0 0 / 30%);
  --shadow-toast: 0 4px 16px rgb(0 0 0 / 20%);
  --shadow-menu: 0 4px 16px rgb(0 0 0 / 15%);
  --shadow-login: 0 12px 40px rgb(15 23 42 / 8%);
  --shadow-primary: 0 1px 2px rgb(0 94 184 / 40%);
  --shadow-dialog: 0 12px 40px rgb(0 0 0 / 30%);

  /* Stacking order */
  --z-raised: 3;
  --z-drag: 6;
  --z-toast: 30;
  --z-ghost: 100;

  /* Layout */
  /* Narrow-screen breakpoint is 55rem; custom properties cannot be used inside @media, so app.css repeats it. */
  --page-max: 80rem;
  --slot-h: 0.9rem;
  --transition-fast: 0.15s;
}