/* Patient Listener — design tokens (Design Plan v0.1 — design system).
   The ONLY place raw colour values appear. Pine-green brand, calm neutral grounds, one
   typeface (Lexend), a dark theme and a distinct safety theme. Colour never carries meaning
   alone (DS-A05). Profiles change behaviour, never colours. */

/* Lexend is loaded via <link> in each page head (Google Fonts). The fallback stack keeps the
   app legible and correctly sized when offline. Swap in the exact licensed face here if there
   is one; Lexend is the specified fallback in the plan. */

:root {
  /* --- Colour: light (default) --- */
  --pl-page: #F2F4F2;           /* ground */
  --pl-surface: #FFFFFF;        /* surface / cue card */
  --pl-text: #10201B;           /* ink */
  --pl-muted: #5C6A63;          /* muted ink — secondary labels only, never a prompt */
  --pl-primary: #15574A;        /* pine green — primary */
  --pl-on-primary: #FFFFFF;
  --pl-good: #145A2F;
  --pl-good-bg: #E3F2E8;
  --pl-warn: #6A3F00;
  --pl-warn-bg: #FBEFD9;
  --pl-danger: #96222A;         /* emergency red — safety card only, never a wrong word */
  --pl-danger-bg: #F8E3E1;      /* blush ground */
  --pl-line: #D7DDD9;           /* card / tile edges (decorative) */
  --pl-line-strong: #CDD4CF;    /* control outlines where more definition helps */
  --pl-tile: #E7EDEA;           /* icon tile / surface2 */
  --pl-caption-bg: #EEF2F0;     /* caption / "You" panel (--cap) */
  --pl-hint-bg: #FBF4E4;        /* amber hint card */
  --pl-hint-line: #ECDCB6;      /* amber hint border */
  --pl-hint-ink: #4A3C18;       /* amber hint text */
  --pl-hint-banner: #8A6D33;    /* amber hint banner */

  /* --- Type: one family (Lexend) --- */
  --pl-font: "Lexend", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pl-text-prompt-size: 36px;  --pl-text-prompt-lh: 1.25;  --pl-text-prompt-wt: 700;
  --pl-text-hint-size: 40px;    --pl-text-hint-lh: 1.2;     --pl-text-hint-wt: 700;
  --pl-text-caption-size: 28px; --pl-text-caption-lh: 1.3;  --pl-text-caption-wt: 400;
  --pl-text-body-size: 24px;    --pl-text-body-lh: 1.4;     --pl-text-body-wt: 400;
  --pl-text-button-size: 26px;  --pl-text-button-lh: 1.2;   --pl-text-button-wt: 700;
  --pl-text-console-size: 18px; --pl-text-console-lh: 1.5;  --pl-text-console-wt: 400;

  /* --- Space (8px grid) --- */
  --pl-space-1: 8px;
  --pl-space-2: 16px;
  --pl-space-3: 24px;
  --pl-space-4: 32px;
  --pl-space-5: 48px;
  --pl-space-6: 64px;

  /* --- Shape --- */
  --pl-target: 64px;            /* patient app min touch target */
  --pl-target-console: 44px;    /* console min target */
  --pl-gap-target: 16px;        /* min gap between targets */
  --pl-radius-card: 16px;       /* cards */
  --pl-radius-tile: 12px;       /* icon tiles */
  --pl-radius-input: 12px;      /* inputs */
  --pl-radius-button: 999px;    /* pills (stadium) */
  --pl-button-height: 72px;
  --pl-content-max: 720px;

  /* --- Motion & focus --- */
  --pl-motion: 0ms;             /* no motion by default (DS-A07) */
  --pl-focus-width: 4px;
  --pl-focus-offset: 3px;
}

/* Motion is opt-in only when the person has not asked to reduce it. */
@media (prefers-reduced-motion: no-preference) {
  :root { --pl-motion: 200ms; }
}

/* --- Colour: dark (system preference), unless the person forced light --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pl-page: #0E1512;
    --pl-surface: #162019;
    --pl-text: #EAF0ED;
    --pl-muted: #9FB0A8;
    --pl-primary: #7FD9C4;        /* mint action — bright on near-black */
    --pl-on-primary: #0E1512;
    --pl-good: #9FE3B5;
    --pl-good-bg: #123322;
    --pl-warn: #F2CE8A;
    --pl-warn-bg: #3A2A05;
    --pl-danger: #F3B0B2;
    --pl-danger-bg: #3A1012;
    --pl-line: #2A332E;
    --pl-line-strong: #3A463F;
    --pl-tile: #1D2A23;
    --pl-caption-bg: #17241D;
    --pl-hint-bg: #2A2410;
    --pl-hint-line: #4A4020;
    --pl-hint-ink: #F2E4BE;
    --pl-hint-banner: #D8BE7E;
  }
}

/* --- Colour: dark, forced by the theme toggle --- */
:root[data-theme="dark"] {
  --pl-page: #0E1512;
  --pl-surface: #162019;
  --pl-text: #EAF0ED;
  --pl-muted: #9FB0A8;
  --pl-primary: #7FD9C4;
  --pl-on-primary: #0E1512;
  --pl-good: #9FE3B5;
  --pl-good-bg: #123322;
  --pl-warn: #F2CE8A;
  --pl-warn-bg: #3A2A05;
  --pl-danger: #F3B0B2;
  --pl-danger-bg: #3A1012;
  --pl-line: #2A332E;
  --pl-line-strong: #3A463F;
  --pl-tile: #1D2A23;
  --pl-caption-bg: #17241D;
  --pl-hint-bg: #2A2410;
  --pl-hint-line: #4A4020;
  --pl-hint-ink: #F2E4BE;
  --pl-hint-banner: #D8BE7E;
}