/* Calm Instrument design tokens and primitives (Slice 1: foundations).
   The one source of colour, type, space, radius and surface for the application. Every other stylesheet
   uses these through var(--…); a raw colour or size elsewhere is a value still to be consolidated
   (design/calm-instrument/style-inventory.py counts them).

   Colour has one meaning each, and a state is never carried by colour alone (always a glyph or words).
   Lime is the brand, the one primary action, the active navigation marker and focus. Never a state.
   Contrast ratios are against --bg / --surface / --raised (WCAG 2.2 AA: text ≥ 4.5, controls ≥ 3). */

:root {
    /* ---- Grounds ---- */
    --bg: #0B0E14;
    --surface: #12161F;
    --raised: #181D28;
    --inset: #0F131A;
    --overlay: #1E2431;
    /* Translucent fills, for hover and quiet emphasis over any ground */
    --fill-1: rgba(255, 255, 255, .03);
    --fill-2: rgba(255, 255, 255, .06);
    --fill-3: rgba(255, 255, 255, .10);

    /* ---- Lines ---- */
    --line: rgba(255, 255, 255, .08);          /* hairline, decorative */
    --line-strong: rgba(255, 255, 255, .14);   /* dividers that must read, secondary button outline */
    --control: #606A7E;                        /* form-control border: 3.55 / 3.33 / 3.10 on bg / surface / raised */

    /* ---- Text ---- */
    --text: #EDF0F4;        /* 16.9 / 15.8 / 14.8 */
    --text-2: #AEB6C2;      /*  9.5 /  8.9 /  8.3 */
    --muted: #8A93A1;       /*  6.2 /  5.8 /  5.4 */
    --disabled: #5E6673;    /*  disabled controls only (exempt from 1.4.3) */

    /* ---- Brand: the mark, the one primary action, the active navigation marker, focus ---- */
    --lime: #A8E22B;        /* 12.5 / 11.7 / 10.9 */
    --lime-hover: #B8EA50;
    --on-lime: #0B0E14;     /* text on lime: 12.5 */
    --tint-brand: rgba(168, 226, 43, .08);
    --tint-brand-2: rgba(168, 226, 43, .14);
    --line-brand: rgba(168, 226, 43, .40);
    --focus: #A8E22B;

    /* ---- Meaning (one hue = one meaning) ---- */
    --attention: #F2C14E;   /* ◆ Needs attention; ◇ Worth reviewing (outline, lower emphasis)   11.5 / 10.8 / 10.1 */
    --immediate: #F77FB0;   /* Immediate technical importance (rose-coral)                       7.9 /  7.4 /  6.9 */
    --workflow: #82B6F2;    /* ↻ your team: follow up, discussed, planned                        9.1 /  8.6 /  8.0 */
    --caution: #F59152;     /* ! before you say it, waiting, held, not current                   8.3 /  7.8 /  7.3 */
    --error: #F26D6D;       /* × error, failed, destructive; ▼ worse in the tenant               6.6 /  6.2 /  5.8 */
    --progress: #5FD08F;    /* ▲ improved; ✓ done, effective, delivered, healthy                10.0 /  9.4 /  8.8 */
    --unknown: #ABA0E8;     /* ? not assessed, evidence gap, needs clarifying (+ dashed)          8.2 /  7.7 /  7.2 */
    --commercial: #5EC8BE;  /* ● ready to propose; ◐ needs input. Inside Commercial only          9.6 /  9.0 /  8.4 */
    --staff: #9DB0C8;       /* Central (staff) chrome only                                        8.7 /  8.2 /  7.6 */

    /* ---- Paper: the printed internal brief only (light). Ratios against --paper / white. ---- */
    --paper: #F7F6F2;
    --paper-ink: #0B0E14;     /* 17.9 / 19.3 */
    --paper-ink-2: #3D4452;   /*  9.0 /  9.8 */
    --paper-ink-3: #5A6372;   /*  5.6 /  6.1  labels, meta */
    --paper-caution: #9A4410; /*  6.1 /  6.6  ! a caution, on paper */
    --paper-unknown: #5646A8; /*  6.8 /  7.4  ? unknown or a range, on paper (+ dashed) */
    --paper-commercial: #0F6E66; /* 5.6 / 6.1  a commercial caution, on paper */
    --paper-brand: #4E7A0B;   /*  4.7 /  5.1  the brand's deep green as text on paper (the report's --rp-brand) */
    --paper-rule: #C9CDD3;    /* hairline on paper (decorative) */

    --tint-attention: rgba(242, 193, 78, .10);  --line-attention: rgba(242, 193, 78, .35);
    --tint-immediate: rgba(247, 127, 176, .10); --line-immediate: rgba(247, 127, 176, .35);
    --tint-workflow: rgba(130, 182, 242, .10);  --line-workflow: rgba(130, 182, 242, .35);
    --tint-caution: rgba(245, 145, 82, .10);    --line-caution: rgba(245, 145, 82, .35);
    --tint-error: rgba(242, 109, 109, .10);     --line-error: rgba(242, 109, 109, .40);
    --tint-progress: rgba(95, 208, 143, .10);   --line-progress: rgba(95, 208, 143, .35);
    --tint-unknown: rgba(171, 160, 232, .08);   --line-unknown: rgba(171, 160, 232, .55);
    --tint-commercial: rgba(94, 200, 190, .10); --line-commercial: rgba(94, 200, 190, .35);

    /* ---- Type: Manrope, 8 sizes (plus the control size), 3 weights ---- */
    --font: Manrope, 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --fs-label: 11.5px;   --lh-label: 16px;     /* uppercase, +0.06em, at most one per section */
    --fs-meta: 12.5px;    --lh-meta: 18px;
    --fs-sm: 13.5px;      --lh-sm: 20px;
    --fs-control: 14px;   --lh-control: 20px;   /* buttons, inputs */
    --fs-body: 15px;      --lh-body: 24px;
    --fs-heading: 16px;   --lh-heading: 24px;
    --fs-title: 20px;     --lh-title: 28px;
    --fs-display: 28px;   --lh-display: 34px;
    --fs-figure: 32px;    --lh-figure: 36px;
    --fs-hero: 34px;      --lh-hero: 38px;      /* the public pages' one title (VitalsLayout); 28px on a phone */
    --fw-body: 500; --fw-strong: 700; --fw-display: 750;

    /* ---- Space (4-based) ---- */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

    /* ---- Radius, size, elevation, motion ---- */
    --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
    --h-control: 40px; --h-control-sm: 32px; --h-touch: 44px;
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, .45);
    --scrim: rgba(0, 0, 0, .55);    /* behind a drawer */
    --t-fast: 120ms ease-out; --t-open: 180ms ease-out;
}

/* ---- Focus: visible 2px lime outline on keyboard focus only ---- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* Programmatic focus on a page heading (after navigation) must not draw a ring around the title. */
h1[tabindex="-1"]:focus, h1:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---- Buttons: one family, five variants ---- */
.ci-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: var(--h-control); padding: 8px 16px; border-radius: var(--r-md);
    font: var(--fw-strong) var(--fs-control)/var(--lh-control) var(--font);
    color: var(--text); background: transparent; border: 1px solid var(--line-strong);
    text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.ci-btn:hover { border-color: var(--control); }
.ci-btn:disabled, .ci-btn[aria-disabled="true"] { color: var(--disabled); border-color: var(--line); cursor: not-allowed; }
.ci-btn-pri { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.ci-btn-pri:hover { background: var(--lime-hover); border-color: var(--lime-hover); }
.ci-btn-quiet { border-color: transparent; padding-left: var(--s2); padding-right: var(--s2); }
.ci-btn-quiet:hover { background: var(--fill-1); border-color: transparent; }
.ci-btn-danger { border-color: transparent; color: var(--error); }
.ci-btn-danger:hover { background: var(--tint-error); border-color: transparent; }
.ci-btn-sm { min-height: var(--h-control-sm); padding: 4px 12px; font-size: var(--fs-sm); }
@media (pointer: coarse) { .ci-btn { min-height: var(--h-touch); } }

/* ---- Links: text with an underline; lime is not a link colour ---- */
.ci-link { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.ci-link:hover { text-decoration-color: var(--text-2); }

/* ---- Badge: one component for every state. Glyph + words always; colour secondary ---- */
.ci-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-strong); color: var(--text); white-space: nowrap; }
.ci-badge > .g { font-size: 12px; line-height: 1; }
.ci-badge.sm { font-size: var(--fs-meta); }
.ci-badge.att, .ci-badge.att > .g { color: var(--attention); }
.ci-badge.wr > .g { color: var(--attention); }
.ci-badge.fu > .g, .ci-badge.wf { color: var(--workflow); }
.ci-badge.steady { color: var(--text-2); font-weight: 600; }
.ci-badge.quiet { color: var(--muted); font-weight: 600; }
.ci-badge.imm { color: var(--immediate); }
.ci-badge.high { color: var(--text); }
.ci-badge.med { color: var(--text-2); font-weight: 600; }
.ci-badge.mon { color: var(--muted); font-weight: 600; }
.ci-badge.act > .g { color: var(--text); }
.ci-badge.blk { color: var(--text-2); font-weight: 600; }
.ci-badge.prog { color: var(--progress); }
.ci-badge.unk { color: var(--unknown); }
.ci-badge.cau { color: var(--caution); }
.ci-badge.err { color: var(--error); }
.ci-badge.co { color: var(--commercial); }
.ci-badge.co-need > .g { color: var(--commercial); }
.ci-badge.co-none { color: var(--muted); font-weight: 600; }

/* ---- Forms ---- */
.ci-field { display: grid; gap: 6px; margin-bottom: var(--s5); }
.ci-label { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--text); }
.ci-help { font-size: var(--fs-meta); color: var(--muted); }
.ci-input, .ci-select, .ci-textarea {
    min-height: var(--h-control); width: 100%; padding: 8px 12px; border-radius: var(--r-md);
    border: 1px solid var(--control); background: var(--inset); color: var(--text);
    font: var(--fw-body) var(--fs-body)/1.4 var(--font);
}
.ci-input::placeholder, .ci-textarea::placeholder { color: var(--muted); }
.ci-input:disabled, .ci-select:disabled, .ci-textarea:disabled { color: var(--disabled); border-color: var(--line-strong); }
.ci-input[aria-invalid="true"], .ci-select[aria-invalid="true"] { border-color: var(--error); }
.ci-error { font-size: var(--fs-meta); font-weight: 600; color: var(--error); }
.ci-required { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); margin-left: 6px; }

/* ---- Caution and unknown ---- */
.ci-caution { border-left: 3px solid var(--caution); padding: 2px 0 2px 14px; }
.ci-unknown { border: 1px dashed var(--line-unknown); border-radius: var(--r-md); padding: 14px 16px; }

/* ---- Icons: one small inline-SVG set (Components/Shared/Icon.razor); never emoji ---- */
.ci-icon { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

.ci-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }