/* =====================================================================
   Remedy · design tokens
   The care of a well-run dispensary: cool clinical paper, a deep
   dispensary green, prescription-label stock with a mono print face, and
   things counted out precisely. "After hours" is the dark mode: the
   pharmacy with the lights down, labels still bright.
   Dark mode follows the visitor's system setting unless <html> carries
   data-theme="light" | "dark".
   Keep in sync with tokens.json (scripts/sync-tokens.mjs copies this file
   into template/css/tokens.css).
   ===================================================================== */
:root {
  /* ---- ground and surfaces ---- */
  --paper: #f3f6f5;         /* cool clinical paper, a breath of mint; never cream */
  --card: #ffffff;          /* shelves, cards, forms */
  --well: #e8eeec;          /* pressed-in wells: inputs, tracks, the blister tray */
  --line: #d3ddd9;          /* hairlines and card edges */
  --ink: #0f1f1b;           /* all text */
  --ink-2: #34463f;
  --muted: #53645d;         /* quiet text; AA on paper, card and well */

  /* ---- the dispensary green: buttons, links, the counter ---- */
  --green: #0a6b50;
  --green-2: #08583f;       /* green, hovered */
  --on-green: #ffffff;      /* text on green */
  --green-soft: #dbefe6;    /* green tint: chips, selected rows */
  --mint: #8edcbd;          /* decorative only: pill halves, highlights; never text */

  /* ---- prescription label stock (the signature component) ---- */
  --label: #fff6cf;         /* label paper; stays light in both modes, like a real label */
  --label-edge: #eadc95;    /* perforations and the label's edge */
  --label-ink: #1e1a08;     /* text on label stock, both modes */

  /* ---- signals ---- */
  --alert: #ad3320;         /* urgent text: "call 000", out of stock */
  --alert-soft: #fbe3dd;
  --ok: #0a6b50;
  --focus: #2b5bd6;         /* focus ring: a clear clinical blue */
  --foil: #c9d2cf;          /* blister foil base; the JS lights it */

  /* ---- depth ---- */
  --shadow-card: 0 1px 0 rgba(15, 31, 27, 0.04), 0 12px 32px -20px rgba(15, 31, 27, 0.28);
  --shadow-lift: 0 1px 0 rgba(15, 31, 27, 0.05), 0 24px 48px -24px rgba(15, 31, 27, 0.34);
  --shadow-label: 0 1px 1px rgba(60, 50, 0, 0.12), 0 14px 26px -16px rgba(60, 50, 0, 0.45);
  --shadow-press: inset 0 2px 6px rgba(15, 31, 27, 0.16);

  /* ---- type ---- */
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* labels, numbers, dosage-style details */
  --fs-h1: clamp(42px, 5.6vw, 84px);
  --fs-h2: clamp(30px, 3.8vw, 54px);
  --fs-h3: 22px;
  --fs-lead: clamp(17px, 1.35vw, 20px);
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-label: 12.5px;

  /* ---- space ---- */
  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 36px;
  --s-7: 56px;
  --s-8: 96px;

  /* ---- shape ---- */
  --r-xs: 4px;              /* labels: nearly square, like die-cut stock */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 26px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 160ms;
  --d: 320ms;
  --d-slow: 720ms;

  color-scheme: light;
}

/* ---- After hours (dark) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1412;
    --card: #12201c;
    --well: #0e1916;
    --line: #233530;
    --ink: #e8f1ed;
    --ink-2: #c2d1cb;
    --muted: #93a59e;
    --green: #3ecf9d;
    --green-2: #62dcb2;
    --on-green: #052119;
    --green-soft: #12382c;
    --mint: #3a9e7d;
    --alert: #ff8b74;
    --alert-soft: #3a1a13;
    --ok: #3ecf9d;
    --focus: #8fb0ff;
    --foil: #2c3a36;
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 14px 34px -20px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.4), 0 26px 52px -24px rgba(0, 0, 0, 0.9);
    --shadow-label: 0 1px 1px rgba(0, 0, 0, 0.4), 0 16px 30px -14px rgba(0, 0, 0, 0.8);
    --shadow-press: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1412;
  --card: #12201c;
  --well: #0e1916;
  --line: #233530;
  --ink: #e8f1ed;
  --ink-2: #c2d1cb;
  --muted: #93a59e;
  --green: #3ecf9d;
  --green-2: #62dcb2;
  --on-green: #052119;
  --green-soft: #12382c;
  --mint: #3a9e7d;
  --alert: #ff8b74;
  --alert-soft: #3a1a13;
  --ok: #3ecf9d;
  --focus: #8fb0ff;
  --foil: #2c3a36;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 14px 34px -20px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.4), 0 26px 52px -24px rgba(0, 0, 0, 0.9);
  --shadow-label: 0 1px 1px rgba(0, 0, 0, 0.4), 0 16px 30px -14px rgba(0, 0, 0, 0.8);
  --shadow-press: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}