/* ==========================================================================
   BRAND TOKENS — PLACEHOLDERS, NOT MEDEXPRESS'S BRAND
   ==========================================================================

   Every colour, font, radius, weight and the logo in this portal resolves to a
   custom property declared in this file, and nowhere else. Dropping in the real
   brand means editing the values below. No component, template or other
   stylesheet needs to change, and no TypeScript does.

   THE ONLY VERIFIED BRAND FACTS are the wordmark: MEDEXPRESS over LONG-TERM
   CARE PHARMACY. No palette, typeface, logo file or usage guideline has been
   supplied or verified, so:

     - the colours below are a neutral, accessible placeholder palette chosen for
       contrast, not for resemblance to anything;
     - the type stack is the system UI stack. No webfont is loaded, from a CDN
       or otherwise — see docs/portal-security.md;
     - there is no logo image. `--brand-logo` is unset and the wordmark renders
       as text until BRAND_LOGO_PATH points at a real file.

   CONTRAST. Every foreground/background pair used in styles.css is checked
   against WCAG 2.1 AA (4.5:1 for body text, 3:1 for large text and for the
   non-text parts of controls) by test/contrast.test.ts, which reads THIS file
   and fails the build if a pair drops below its threshold. The measured ratios
   are recorded beside each pair. If you change a value, run the tests: the
   audience is elderly readers on phones in variable light, and this is the
   control that matters most to them.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  /* Ink on paper. #1b1b1b on #ffffff = 17.22:1. */
  --color-ink: #1b1b1b;
  --color-ink-muted: #4a4a4a; /* on #ffffff = 8.86:1 */
  --color-paper: #ffffff;
  --color-paper-sunken: #f4f5f7; /* --color-ink on this = 15.79:1 */
  --color-line: #c9ced6;
  --color-line-strong: #6b7280; /* 4.83:1 against paper, for control borders */

  /* Primary action. #1d4ed8 with white text = 6.70:1. */
  --color-primary: #1d4ed8;
  --color-primary-hover: #1a41b0;
  --color-on-primary: #ffffff;

  /* Secondary action: primary ink on paper, with a visible border. */
  --color-secondary-ink: #1d4ed8; /* on #ffffff = 6.70:1 */
  --color-secondary-bg: #ffffff;

  /* Error. #b3261e on #ffffff = 6.54:1; on the tint below = 5.96:1. */
  --color-error: #b3261e;
  --color-error-tint: #fdf2f2;

  /* Informational callout (Medicare box). #0f5132 on #eef7f2 = 8.57:1. */
  --color-accent-ink: #0f5132;
  --color-accent-tint: #eef7f2;
  --color-accent-line: #b7ddc8;

  /* Focus ring. Deliberately high contrast against both paper and primary. */
  --color-focus: #b45309;

  /* --- Type -------------------------------------------------------------- */
  /* System stack only: nothing is fetched from a third-party font service. */
  --font-body:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-heading: var(--font-body);

  /* Base is 18px, not the browser's 16px default: the audience is elderly
     readers on phones. Everything else is relative to it, so a visitor who
     increases their browser's font size scales the whole page. */
  --font-size-base: 1.125rem; /* 18px at default settings */
  --font-size-small: 1rem;
  --font-size-lead: 1.25rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --line-height-body: 1.6;
  --line-height-heading: 1.25;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* --- Space and shape --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius: 6px;
  --radius-large: 10px;
  --border-width: 2px;
  --focus-width: 3px;

  /* Minimum interactive target. WCAG 2.1 AA asks for 44x44 CSS pixels; this is
     larger, because the audience is older hands on small screens. */
  --target-min: 3.25rem;

  --shell-max-width: 44rem;

  /* --- Brand assets ------------------------------------------------------ */
  /* Unset until a real logo file exists. The text wordmark is the fallback and
     is also the alt text. */
  --brand-logo: none;
  --wordmark-primary-size: 1.35rem;
  --wordmark-primary-weight: 800;
  --wordmark-primary-tracking: 0.08em;
  --wordmark-secondary-size: 0.8rem;
  --wordmark-secondary-weight: 600;
  --wordmark-secondary-tracking: 0.14em;
  --masthead-bg: #ffffff;
  --masthead-ink: #1b1b1b;
  --masthead-border: #1d4ed8;
}

/*
   Dark mode is honoured rather than forced. The same tokens are redefined; no
   component knows which mode it is in. Contrast was re-checked for each pair.
*/
@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #f2f3f5; /* on #16181c = 16.01:1 */
    --color-ink-muted: #c3c7cf; /* on #16181c = 10.49:1 */
    --color-paper: #16181c;
    --color-paper-sunken: #1f2229;
    --color-line: #3a3f49;
    --color-line-strong: #8a919c;

    --color-primary: #9cc0ff; /* with #16181c text = 9.65:1 */
    --color-primary-hover: #b9d2ff;
    --color-on-primary: #16181c;

    --color-secondary-ink: #9cc0ff;
    --color-secondary-bg: #16181c;

    --color-error: #ff9b93; /* on #16181c = 8.77:1 */
    --color-error-tint: #2a1a19;

    --color-accent-ink: #9fe0bd; /* on #17241d = 10.62:1 */
    --color-accent-tint: #17241d;
    --color-accent-line: #2f5a45;

    --color-focus: #ffb454;

    --masthead-bg: #16181c;
    --masthead-ink: #f2f3f5;
    --masthead-border: #9cc0ff;
  }
}

/* A visitor who has asked for more contrast gets pure black or white ink. */
@media (prefers-contrast: more) {
  :root {
    --color-ink: #000000;
    --color-ink-muted: #000000;
    --color-line: #000000;
    --color-line-strong: #000000;
  }
}