/* NNUH design tokens — the single source of truth for brand colour on the web.
 *
 * The teal is the portal's original #44b4b4, kept by choice. Note that it
 * measures 2.49:1 on white, below the WCAG AA threshold of 4.5:1 for text and
 * 3:1 for UI borders — so white-on-teal button labels and teal link text are
 * hard to read for low-vision and older patients. If that ever needs fixing
 * without changing the look, darken only --nnuh-teal-ink (used for text and
 * button fills) and leave --nnuh-teal for decorative fills and borders.
 *
 * Everything else now matches nnuh.org's theme tokens
 * (nnuh_website/src/backend/theme/css/base.css :root), which the mobile app
 * already agrees with on navy. Roles follow nnuh.org too: navy carries text,
 * headings and links; teal is the accent and the link hover; magenta is rare.
 *   --pbmit-global-color      #44B4B4  -> --nnuh-teal
 *   --pbmit-secondary-color   #00224a  -> --nnuh-navy
 *   --pbmit-color-extra       #980065  -> --nnuh-magenta
 *
 * The -rgb triplets exist because var() cannot be used inside a legacy
 * rgba(r, g, b, a) — write rgba(var(--nnuh-teal-rgb), .12) instead.
 */
:root {
    /* ── Brand ─────────────────────────────────────────────── */
    --nnuh-teal: #44b4b4;
    --nnuh-teal-rgb: 68, 180, 180;
    --nnuh-teal-dark: #3aa0a0;
    /* Fills that carry white text. staff.nnuh.org ships exactly this split
       (--au-teal-bright #44b4b4 for brand, --au-teal-btn #1a8384 for the
       button gradient) so white labels reach WCAG AA at ~4.6:1, while the
       brand teal above stays untouched everywhere else. */
    --nnuh-teal-btn: #1a8384;
    --nnuh-teal-btn-rgb: 26, 131, 132;
    --nnuh-teal-btn-dark: #14787a;
    --nnuh-teal-light: #6fc7c7;
    --nnuh-teal-soft: #e0f2f2;

    --nnuh-navy: #00224A;
    --nnuh-navy-rgb: 0, 34, 74;
    --nnuh-navy-soft: #DAE3F3;

    /* Decorative accent. Never use for errors or destructive actions. */
    --nnuh-magenta: #980065;
    --nnuh-magenta-rgb: 152, 0, 101;
    --nnuh-magenta-dark: #6E0449;
    --nnuh-magenta-soft: #F6DDEE;

    /* ── Semantic ──────────────────────────────────────────── */
    --nnuh-success: #12B76A;
    --nnuh-warning: #92400E;
    --nnuh-error: #D92D20;
    --nnuh-info: #1F6FEB;

    /* ── Link roles, straight from nnuh.org ────────────────── */
    --nnuh-link: var(--nnuh-navy);
    --nnuh-link-hover: var(--nnuh-teal);

    /* ── Text ──────────────────────────────────────────────── */
    --nnuh-ink: #00224A;
    --nnuh-ink-muted: #5A6777;
    --nnuh-ink-faint: #8B95A3;
    /* nnuh.org sets body copy at 15px/1.8 in this grey. */
    --nnuh-body: #666666;
    --nnuh-on-brand: #FFFFFF;

    /* ── Surfaces ──────────────────────────────────────────── */
    --nnuh-surface: #FFFFFF;
    --nnuh-surface-sunken: #F5F7FA;
    --nnuh-surface-high: #ECEFF4;
    --nnuh-hairline: #E8ECF1;
    --nnuh-hairline-strong: #D6DBE2;

    /* ── Type ──────────────────────────────────────────────── */
    /* nnuh.org's face. Patients usually arrive from there, so the two web
       properties should read as one product; its Arabic is Naskh-style, which
       is easier to read at body sizes than Readex Pro's Kufi-derived Arabic.
       The mobile app keeps Readex Pro — shared palette, different face.
       Weights 400/500/600/700 are all downloaded; the site previously had
       only 300 and asked for 500/600/700 in 28 places, so every bold heading
       was synthetic, which mangles Arabic letter joins. */
    --nnuh-font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

    /* ── Shape ─────────────────────────────────────────────── */
    --nnuh-radius-btn: .25rem; /* nnuh.org .pbmit-btn */
    --nnuh-radius: 14px;
    --nnuh-radius-sm: 10px;

    /* Comfortably above the 44px minimum. A large share of our patients are
       elderly and tapping on a phone. */
    --nnuh-tap: 48px;
}