/* ========================================
   CSS Custom Properties (Design Tokens)
   MGH ED Patient Portal

   Colour + type system follows the official MGH Brand Book (print) as
   realized for web by the production tehn.ca theme. The brand book and
   the derived web reference live in the maintainer's private project
   repository.

   Primary trio (logo colours): #B2D235 lime, #76B043 green, #414042
   charcoal (Pantone 446 C, used as-is). Secondary accents: teal #1E798D,
   cyan #00ABCF, purple #702984, light purple #965C9E.

   EXEMPT FROM BRAND PALETTE (functional colour, not decoration):
   - Zone identity colours (--section-*): MGH ED zones are literally
     colour-named (Red/Blue/Green/Pink/Yellow Zone, RAZ). Patients
     navigate by these colours on physical signage, so the map, zone
     tiles, and wait-screen mocks must keep them accurate.
   - CTAS badge colours (components.css .ctas-*): national triage
     scale colour conventions.
   ======================================== */

:root {
  /* MGH Brand Colors - official Brand Book palette */
  --brand-primary: #B2D235;        /* Pantone 282 C - primary brand lime */
  --brand-primary-light: #C9E072;  /* live-site hover tint of the lime */
  --brand-green: #76B043;          /* Pantone 7489 C - logo green (icons, small accents) */
  --brand-secondary: #33501C;      /* dark green for links and text-level accents.
                                      Deepened from the live-site #4D732B (5.5:1) so
                                      green TEXT clears WCAG AAA 7:1 on white, the
                                      #F5F6F7 surface and the lime-tint chips
                                      (measured 9.11 / 8.42 / 7.58:1). Decorative
                                      greens stay on --brand-green / --brand-primary. */
  --brand-charcoal: #414042;       /* Pantone 446 C - official Brand Book charcoal */
  --brand-teal: #1E798D;           /* Pantone 7713 C - secondary accent */
  --brand-cyan: #00ABCF;           /* Pantone 7466 C - secondary accent */
  --brand-purple: #702984;         /* Pantone 2603 C - secondary accent */
  --brand-purple-light: #965C9E;   /* Pantone 2583 C - secondary accent */

  /* Section Card Colors - ZONE IDENTITY COLOURS (see exemption note above).
     Red/Blue/Green/Pink/Yellow/Orange(RAZ) match the ED's colour-named
     zones; teal/purple/gray complete the legacy accordion set. */
  --section-red: #FFBABA;
  --section-red-end: #FFA0A0;
  --section-orange: #FFD6A5;
  --section-orange-end: #FFC078;
  --section-yellow: #E8E4A0;
  --section-yellow-end: #D6D080;
  --section-green: #A8E6B0;
  --section-green-end: #88D898;
  --section-teal: #A0D8D0;
  --section-teal-end: #80C8BE;
  --section-blue: #A8D8F0;
  --section-blue-end: #88C8E8;
  --section-pink: #F5C8D8;
  --section-pink-end: #E8A8C0;
  --section-purple: #D4C8E8;
  --section-purple-end: #B8A8D8;
  --section-gray: #DEDEDE;
  --section-gray-end: #CCCCCC;

  /* Section Glass Colors (translucent gradient endpoints) */
  --section-red-glass: rgba(255, 190, 190, 0.7);
  --section-red-glass-end: rgba(255, 130, 130, 0.7);
  --section-orange-glass: rgba(255, 218, 170, 0.7);
  --section-orange-glass-end: rgba(255, 170, 90, 0.7);
  --section-yellow-glass: rgba(235, 230, 165, 0.7);
  --section-yellow-glass-end: rgba(200, 195, 100, 0.7);
  --section-green-glass: rgba(170, 235, 180, 0.7);
  --section-green-glass-end: rgba(110, 205, 130, 0.7);
  --section-teal-glass: rgba(160, 216, 208, 0.7);
  --section-teal-glass-end: rgba(100, 180, 170, 0.7);
  --section-blue-glass: rgba(170, 220, 245, 0.7);
  --section-blue-glass-end: rgba(110, 185, 230, 0.7);
  --section-gray-glass: rgba(225, 225, 225, 0.7);
  --section-gray-glass-end: rgba(190, 190, 190, 0.7);

  /* Semantic Colors - brand neutrals from the live tehn.ca theme */
  --bg: #FFFFFF;
  --bg-surface: #F5F6F7;
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --text: #414042;
  /* Secondary/muted text sits at AAA (>=7:1) on every surface it appears on:
     8.54:1 on cards, 7.89:1 on the body, 7.58:1 on the lime-tint chips.
     (These were 5.3-6.8:1 AA greys until the 2026-07-23 AAA pass; the old
     values survive only in git history.) Still a visible step off the ink. */
  --text-secondary: #4D4C4E;
  --text-muted: #4D4C4E;
  --border: #DDDDDE;
  --border-strong: #C8CBCC;
  --focus-ring: #4D732B;      /* focus indicator needs 3:1, not 7:1 - measures 5.5:1 on white */
  --text-on-brand: #2B2A2C;   /* deep charcoal on lime: 8.27:1 (AAA). White fails on #B2D235;
                                 the brand charcoal #414042 was 5.97:1 (AA only). */
  --link: var(--brand-secondary); /* green links, never blue (brand reference section 4) */
  --link-hover: #263D10;
  --entrance-arrow: #1E798D;  /* brand teal (map entrance markers) */
  --brand-primary-shadow: rgba(178, 210, 53, 0.35);

  /* Spacing Scale */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */

  /* Typography - Montserrat headings + Roboto body (web realization of
     the Brand Book's Gotham/Arial, matching the live tehn.ca theme).
     Self-hosted in css/fonts.css; system stacks are the swap fallback. */
  --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-family-heading: "Montserrat", "Roboto", Helvetica, Arial, sans-serif;
  /* The one text-size knob (see base.css `html`). A percentage of the reader's
     own browser font-size preference, so our control composes with theirs
     instead of overriding it. The .font-size-* classes below move only this;
     every size token underneath is rem-relative and follows automatically. */
  --font-size-root: 100%;       /* 16px at the usual browser default */

  /* Height of the fixed "translated by a computer" banner, kept in sync by
     translate.js (0 when the banner is hidden). The top bar's padding adds it
     so the header - live and its transition-ghost clone alike - sits below the
     banner. See the .translate-disclaimer rule. */
  --translate-banner-h: 0px;
  --font-size-base: 1rem;       /* 16px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --line-height: 1.6;
  --line-height-tight: 1.3;
  /* Uppercase Montserrat 800 display headings need a touch of positive
     tracking to stay legible (brand headings are all-caps on tehn.ca). */
  --tracking-display: 0.015em;

  /* Layout - corner radii tightened to the tehn.ca component scale
     (~3-8px; pills stay intentionally round, matching their pill CTAs) */

  /* THE app column width, and the only place it is decided. The header, main,
     footer, the status/update/translate banners and the footer skyline strip
     all resolve this token, so they cannot drift apart.
     They previously did: this token said 600px while ios.css hard-coded the
     real column at 402px, so on any viewport >=768px the skyline and every
     banner rendered 198px wider than the content they belonged to.
     The portal is a phone-first app (it is opened by scanning a QR code at the
     bedside), so the column stays phone-shaped by design. It is allowed a
     little more room on a tablet or a desk monitor - where it is read by family
     and staff - without ever becoming a full-width web page. */
  --max-width: 402px;
  --border-radius: 8px;
  --border-radius-sm: 5px;
  --header-height: auto;

  /* Motion system. Two named curves cover every deliberate movement:
     - --ease-standard: starts from rest (accelerate then settle). For
       tap-triggered motion: page slides, reveals, expands.
     - --ease-decel: already moving (settle only). For gesture settles that
       inherit finger velocity: the swipe commit/spring-back.
     JS mirror: js/motion.js (WAAPI cannot read var()). Keep in sync. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel: cubic-bezier(0.2, 0, 0.2, 1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms var(--ease-standard);
  --transition-slow: 400ms ease;

  /* Shadows (neutral - the old blue-tinted depth reads off-brand) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* Touch Targets */
  --min-touch-target: 44px;

  /* Icons & Arrows */
  --icon-size: 24px;
  --arrow-size: 10px;
  --arrow-size-sm: 8px;
  --arrow-border-width: 2px;

  /* Focus Ring */
  --focus-outline: 3px solid var(--focus-ring);
  --focus-offset: 2px;

  /* Glass Material System */
  --glass-blur: 8px;
  --glass-saturate: 160%;
  --glass-bg-light: rgba(255, 255, 255, 0.72);
  --glass-bg-medium: rgba(255, 255, 255, 0.55);
  --glass-bg-heavy: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --glass-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-pill: 2rem;
  --glass-bg-opaque: rgba(245, 246, 247, 0.97);
  --glass-gloss: rgba(255, 255, 255, 0.45);
  --glass-gloss-end: rgba(255, 255, 255, 0.05);

  /* ========================================
     Patient Hub tokens (brand-aligned)
     Cool light-grey surface stack from the live tehn.ca neutrals
     (was the warm off-white "iOS" stack) + MGH lime/green accents.
     ======================================== */
  --ios-bg-body: #F5F6F7;
  --ios-bg-card: #FFFFFF;
  --ios-bg-nested: #F3F3F3;
  --ios-accent: var(--brand-green);
  --ios-accent-soft: rgba(178, 210, 53, 0.22);
  --ios-accent-strong: var(--brand-secondary);
  --ios-ink: #414042;
  /* AAA muted text - see the --text-secondary note above. */
  --ios-muted: #4D4C4E;
  --ios-kicker: #4D4C4E;
  /* Dock labels sit on a translucent surface; keep the darker token so
     small labels hold 7:1 after compositing (8.7:1 on the composited dock). */
  --ios-dock-muted: #3B3A3C;
  --ios-border: rgba(0, 0, 0, 0.09);
  /* Skeleton placeholders (components.css .skeleton-bar): bar fill + the
     moving sheen highlight. Decorative, not text - no contrast floor. */
  --skeleton-bar: rgba(0, 0, 0, 0.07);
  --skeleton-sheen: rgba(255, 255, 255, 0.55);
  --ios-divider: rgba(0, 0, 0, 0.08);

  /* Large-screen framing (see the "Framed app column" block in ios.css).
     Only ever visible at >=1024px; phones never paint these.
     The backdrop is a deeper neutral from the same cool grey family as the
     tehn.ca surface stack, so the column reads as a lit surface sitting on a
     desk rather than a page that failed to fill the window. */
  --app-backdrop: #E4E7EA;
  --app-frame-shadow: 0 24px 64px rgba(65, 64, 66, 0.14), 0 2px 8px rgba(65, 64, 66, 0.06);

  --radius-card: 8px;
  --radius-tile: 6px;
  --radius-pill: 999px;
  --radius-check: 4px;

  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-tab: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);

  --type-hero: 1.875rem;    /* 30px - uppercase Montserrat 800 display */
  --type-title: 1.75rem;    /* 28px */
  --type-tile: 1.375rem;    /* 22px */
  --type-body: 1.0625rem;   /* 17px */
  --type-kicker: 0.8125rem; /* 13px */
  --tracking-kicker: 0.08em;
}

/* ========================================
   Responsive app column

   The one place the column width changes. Two gentle steps, not a reflow: the
   layout, the reading order and the tile grid are identical at every size, so
   there is no second layout to design, test or keep accessible - the column
   just stops looking marooned on a large screen.

   Kept well under a typographic measure (~65ch) on purpose: this is scanned in
   a waiting room, not read like an article.
   ======================================== */

/* Tablets, and any laptop window narrow enough to be a side panel. */
@media (min-width: 768px) {
  :root {
    --max-width: 468px;
  }
}

/* Desk monitors - where staff and family read it. */
@media (min-width: 1024px) {
  :root {
    --max-width: 520px;
  }
}

/* ========================================
   Dark Mode Overrides
   ======================================== */
[data-theme="dark"] {
  --bg: #121212;
  --bg-surface: #1E1E1E;
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --text: #E5E5E5;
  /* AAA (>=7:1) on the darkest surface each token sits on: #B3B3B3 is 7.95:1
     on cards, #AFAFAF is 7.6:1 on #1E1E1E and 8.5:1 on the body. */
  --text-secondary: #B3B3B3;
  --text-muted: #AFAFAF;
  --border: #333333;
  --border-strong: #444444;
  --focus-ring: #B2D235;
  --link: #C9E072;
  --link-hover: #B2D235;
  --entrance-arrow: #00ABCF;
  --brand-primary-shadow: rgba(178, 210, 53, 0.25);
  --flow-step-bg: var(--brand-secondary);
  --flow-step-text: #FFFFFF;

  /* Dark mode section colors - vibrant enough to differentiate */
  --section-red: #5C2828;
  --section-red-end: #401818;
  --section-orange: #5C3A1C;
  --section-orange-end: #402810;
  --section-yellow: #504C1E;
  --section-yellow-end: #383512;
  --section-green: #1E5C22;
  --section-green-end: #124016;
  --section-teal: #1E4C48;
  --section-teal-end: #123832;
  --section-blue: #1E3E5C;
  --section-blue-end: #122C40;
  --section-pink: #5C2838;
  --section-pink-end: #40182A;
  --section-purple: #382C5C;
  --section-purple-end: #24184A;
  --section-gray: #3C3C3C;
  --section-gray-end: #2C2C2C;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Glass Material System - Dark Mode */
  --glass-bg-light: rgba(30, 30, 30, 0.72);
  --glass-bg-medium: rgba(30, 30, 30, 0.55);
  --glass-bg-heavy: rgba(30, 30, 30, 0.85);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-bg-opaque: rgba(30, 30, 30, 0.97);

  /* Section Glass Colors - Dark Mode (brighter, more saturated) */
  --section-red-glass: rgba(140, 50, 50, 0.75);
  --section-red-glass-end: rgba(95, 30, 30, 0.75);
  --section-orange-glass: rgba(140, 85, 40, 0.75);
  --section-orange-glass-end: rgba(95, 55, 25, 0.75);
  --section-yellow-glass: rgba(125, 120, 50, 0.75);
  --section-yellow-glass-end: rgba(90, 85, 30, 0.75);
  --section-green-glass: rgba(45, 130, 55, 0.75);
  --section-green-glass-end: rgba(30, 90, 40, 0.75);
  --section-teal-glass: rgba(40, 110, 100, 0.75);
  --section-teal-glass-end: rgba(25, 80, 72, 0.75);
  --section-blue-glass: rgba(45, 100, 140, 0.75);
  --section-blue-glass-end: rgba(30, 70, 105, 0.75);
  --section-gray-glass: rgba(85, 85, 85, 0.75);
  --section-gray-glass-end: rgba(60, 60, 60, 0.75);

  --glass-gloss: rgba(255, 255, 255, 0.12);
  --glass-gloss-end: rgba(255, 255, 255, 0.02);

  /* Patient Hub tokens - dark-mode counterparts */
  --ios-bg-body: #141414;
  --ios-bg-card: #1E1E1E;
  --ios-bg-nested: #262626;
  --ios-accent: #B2D235;
  /* Alpha lowered from 0.18: the composited chip must stay dark enough that
     muted text (#C0C0C0) and lime text on it clear 7:1 (7.4 / 7.8:1). */
  --ios-accent-soft: rgba(178, 210, 53, 0.10);
  --ios-accent-strong: #C9E072;
  --ios-ink: #E5E5E5;
  /* AAA on the accent-soft chips and nested surfaces (7.4-9.2:1). */
  --ios-muted: #C0C0C0;
  --ios-kicker: #C0C0C0;
  --ios-dock-muted: #C0C0C0;
  --ios-border: rgba(255, 255, 255, 0.08);
  --skeleton-bar: rgba(255, 255, 255, 0.07);
  --skeleton-sheen: rgba(255, 255, 255, 0.07);
  --ios-divider: rgba(255, 255, 255, 0.1);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-tab: 0 10px 30px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);

  /* Large-screen framing. In dark mode the column is the *lighter* surface, so
     the backdrop recedes below it rather than glowing around it. A drop shadow
     does no work on near-black, so the column edge is carried by a rim light
     instead - without it the #141414 column and the backdrop read as one flat
     void. */
  --app-backdrop: #050505;
  --app-frame-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 64px rgba(0, 0, 0, 0.7);
}

/* ========================================
   Increased contrast

   Honours a preference the reader has ALREADY expressed to their phone
   (iOS: Increase Contrast, Android: High contrast text, Windows/macOS
   equivalents). No setting of our own, no extra decision asked of someone
   sitting in an ED waiting room - we just stop being subtle.

   Since the 2026-07-23 AAA pass the default tokens already meet AAA text
   contrast (>=7:1), so the text lifts below are mostly no-ops kept for
   robustness; what this preference still adds is the stronger hairline
   borders and dividers. Measured values, not guesses:
     light  #4D4C4E -> 7.89:1 on the body, 8.54:1 on cards
     dark   #C0C0C0 -> 9.16:1 on cards,    10.13:1 on the body
   Both stay a step off the ink (#414042 / #E5E5E5), so secondary text still
   reads as secondary rather than flattening into the body copy.

   MUST come after the [data-theme="dark"] block: these selectors carry the
   same specificity, so source order is what lets the dark variant below win
   for a reader who is on dark AND high contrast.
   ======================================== */
@media (prefers-contrast: more) {
  :root {
    --text-secondary: #4D4C4E;
    --text-muted: #4D4C4E;
    --ios-muted: #4D4C4E;
    --ios-kicker: #4D4C4E;
    /* Dock labels composite over a translucent surface, so they start from a
       darker token than the rest (see the base :root note) and stay darker. */
    --ios-dock-muted: #3B3A3C;
    --border: #8E8E90;
    --border-strong: #6B6B6D;
    --ios-border: rgba(0, 0, 0, 0.38);
    --ios-divider: rgba(0, 0, 0, 0.32);
  }

  [data-theme="dark"] {
    --text-secondary: #C0C0C0;
    --text-muted: #C0C0C0;
    --ios-muted: #C0C0C0;
    --ios-kicker: #C0C0C0;
    --ios-dock-muted: #C8C8C8;
    --border: #6E6E6E;
    --border-strong: #8A8A8A;
    --ios-border: rgba(255, 255, 255, 0.36);
    --ios-divider: rgba(255, 255, 255, 0.30);
  }
}

/* ========================================
   Font Size Overrides

   These move the root knob only. Everything sized in rem - body copy, the
   hub type scale, and the spacing rhythm - scales with it in proportion, so
   one declaration per level replaces the per-token tables that used to live
   here (which had to be kept in sync by hand, and silently left the type and
   spacing tokens out entirely).

   Percentages compose with the reader's browser font-size preference rather
   than replacing it.
   ======================================== */
.font-size-medium {
  --font-size-root: 112.5%;     /* 18px at a 16px browser default */
}

.font-size-large {
  --font-size-root: 125%;       /* 20px at a 16px browser default */
}

/* The top step exists for readers who need real magnification, so it takes a
   bigger jump than the ones below it (16 / 18 / 20 / 24). Browser zoom still
   goes further; this is the in-page control, not the ceiling. */
.font-size-xlarge {
  --font-size-root: 150%;       /* 24px at a 16px browser default */
}