/*
 * Hemi design tokens — the one shared source for the app, hemi.nz and demo.hemi.nz.
 *
 * EXTRACTED, NOT DESIGNED. Every value here was taken from the app's own stylesheet, and the
 * provenance of each group is stated, because the groups are not equally real:
 *
 *   DECLARED  — already custom properties in frontend/src/index.css. Copied exactly.
 *   MEASURED  — never tokenised. Hardcoded literals scattered through ~2,600 lines of CSS, ranked
 *               here by how often each value is actually used. These are the de facto system,
 *               not an intentional scale, and should be read that way: they describe what the
 *               app does, and some of the rarer values are one-offs rather than steps.
 *
 * Measured from the stylesheet at commit 770a118, BEFORE any of the i18n work. That work added
 * CSS of its own (the language selector and the speech notice), and extracting from the current
 * file would have folded those recent additions into "the design" — 3 extra uses of 11px, 2 of
 * 16px and 1 of weight 700 came from that session rather than from the original mockups.
 *
 * Plain CSS custom properties with no build step, so a static page can link this file directly.
 *
 * NOT YET WIRED INTO THE APP. The app still defines these in its own :root, so for now this file
 * is a copy that can drift. Step 4 should make the app import from here, leaving one source.
 */

/* =============================================================================================
   COLOUR — DECLARED
   Dark is the default and carries no attribute. Light opts in with data-theme="light".
   ============================================================================================= */

:root {
  /* Surfaces — page sits behind, card sits on top, block is sunken within a card */
  --page: #16181c;
  --card: #1c1f24;
  --block: #22262c;
  --border: #2a2d33;
  --border-strong: #2e3238;

  /* Text, strongest to weakest */
  --text: #f5f6f7;
  --text-body: #d8dbdf;
  --text-secondary: #9aa0a8;
  --text-muted: #7c828b;
  --text-label: #6c7178;

  /* Accent — blue is the ONLY action colour. Nothing else competes with it. */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: #6ea8ff; /* read as "accent text on a tint", not "a lighter blue" */
  --accent-tint: rgba(59, 130, 246, 0.15);

  /* Amber — a review cue. Never an alarm colour. */
  --flag: #f0ba6e;
  --flag-tint: rgba(240, 159, 39, 0.18);
  --flag-border: rgba(240, 159, 39, 0.35);
  --flag-soft: rgba(240, 159, 39, 0.08);

  /* Soft red — reserved for STAT priority and destructive hover only */
  --alert: #f08a8a;
  --alert-tint: rgba(240, 90, 90, 0.15);

  --neutral-tint: rgba(154, 160, 168, 0.14);

  color-scheme: dark;
}

/* Light — restrained and institutional (Epic/Cerner, not a consumer palette). Two things
   INVERT rather than lighten: --accent-light goes darker, and --accent itself darkens because
   #3b82f6 carries white text at only ~3:1 on white, which fails AA. */
:root[data-theme="light"] {
  --page: #f2f4f7;
  --card: #ffffff;
  --block: #f4f6f9;
  --border: #dde2e8;
  --border-strong: #c8cfd7;

  --text: #14171a;
  --text-body: #2b3036;
  --text-secondary: #4e555e;
  --text-muted: #5d646d;
  --text-label: #646b74;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: #1d4ed8;
  --accent-tint: rgba(37, 99, 235, 0.1);

  --flag: #8a5300;
  --flag-tint: rgba(240, 159, 39, 0.16);
  --flag-border: rgba(190, 125, 20, 0.4);
  --flag-soft: rgba(240, 159, 39, 0.1);

  --alert: #b42318;
  --alert-tint: rgba(217, 45, 32, 0.1);

  --neutral-tint: rgba(90, 100, 112, 0.1);

  color-scheme: light;
}

/* =============================================================================================
   TYPEFACES — DECLARED
   All three are SYSTEM FONT STACKS. The app loads no webfonts, so each renders in whatever the
   visitor's OS provides — see the note on the wordmark.
   ============================================================================================= */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

  /* The wordmark. "Iowan Old Style" ships only on Apple platforms, so on Windows and Android the
     "Hemi" wordmark falls through to Palatino or Georgia and looks visibly different. Inside the
     app that has been acceptable; on a public brand page it is the first thing anyone sees. */
  --font-wordmark: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    "Times New Roman", serif;
}

/* =============================================================================================
   RADII — DECLARED
   ============================================================================================= */

:root {
  --radius-card: 28px;
  --radius-block: 12px;
  --radius-btn: 10px;
  --radius-chip: 8px;
  --radius-pill: 20px;
}

/* =============================================================================================
   SHADOWS
   ============================================================================================= */

:root {
  /* DECLARED, and the only general-purpose shadow in the app. Used 3 times, all on menus. */
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
  --shadow-menu: 0 12px 32px rgba(16, 24, 40, 0.14);
}

/* MEASURED, and deliberately NOT general tokens. These two glows exist only on the record
   button — the blue one at rest, the red one while recording — and the design direction states
   that glow must not be propagated beyond the element it was drawn for. Named here so they are
   not reinvented, and prefixed so nobody mistakes them for a shadow scale.

   --record-glow        : 0 8px 24px rgba(59, 130, 246, 0.35)
   --record-glow-active : 0 8px 24px rgba(240, 90, 90, 0.3)
*/
:root {
  --record-glow: 0 8px 24px rgba(59, 130, 246, 0.35);
  --record-glow-active: 0 8px 24px rgba(240, 90, 90, 0.3);
}

/* =============================================================================================
   TYPE SCALE — MEASURED
   Uses, in the original stylesheet:

     14px  31  body text — also the body default
     13px  31  secondary text, controls
     12px  19  labels, meta
     11px   5  eyebrow labels, uppercase
     15px   4
     16px   1
     13.5px 1  one-off
     17px   1  .patient-name
     17.5px 1  .rich-note.size-large — one-off
     20px   1  .card-title
     22px   1  .home-hero-prompt
     25px   1  .logo (header wordmark)
     34px   1  .auth-brand (sign-in wordmark)

   The app is dense by design: 81 of 99 declarations sit at 12–14px. The only sizes above 17px
   are the four named above, each used exactly once. There is no heading scale to extract, and a
   marketing page will need larger sizes than the app has ever used — those would be NEW values,
   and should be flagged as such rather than presented as extracted.
   ============================================================================================= */

:root {
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-title: 20px;   /* .card-title */
  --text-hero: 22px;    /* .home-hero-prompt — the largest body-font size in the app */
  --text-logo: 25px;    /* .logo, wordmark font */
  --text-brand: 34px;   /* .auth-brand, wordmark font — the largest size in the app */
}

/* =============================================================================================
   WEIGHT — MEASURED
     600  31   500  13   400  3   700  1
   ============================================================================================= */

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600; /* the app's default emphasis — far more common than bold */
  --weight-bold: 700;     /* used once in the original */
}

/* =============================================================================================
   LINE HEIGHT AND TRACKING — MEASURED
     line-height: 1.5 (7)  1 (6)  1.6 (3)  one-offs: 1.45, 1.55, 1.7, 1.75
     letter-spacing: 0.5px (10) on uppercase labels; negative tracking only on the wordmark
   ============================================================================================= */

:root {
  --leading-tight: 1;
  --leading-body: 1.5;
  --leading-relaxed: 1.6;
  --tracking-label: 0.5px; /* uppercase eyebrow labels */
}

/* =============================================================================================
   SPACING — MEASURED
   The least systematic group. padding/margin/gap values by use:

     16px 23+7   14px 23+11   12px 13+12   10px 17+6   8px 12+9   6px 15+10   18px 15+3
     4px  11+3   20px 7       2px  6+3     22px 5       3px 3+6    5px, 7px, 13px — one-offs

   Not a 4px or 8px grid: 6, 10, 14 and 18 are all heavily used. Listed as observed. Anything
   built on this should reuse these values rather than normalising them to a grid, or the new
   surface will not sit visually beside the app.
   ============================================================================================= */

:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
}