/* ============================================================================ MEDKIT — "The Examiner's Standard" · refreshed (v3, 2026) colors_and_type.css — the single source of truth for color + type tokens. Concept (unchanged): Medkit is the reference document a clinical board would publish, made interactive — authority, neutrality, reproducibility, warmth. v3 keeps that soul but modernizes the surface: brighter, airier paper, ONE warmer coral accent, measured-rounder radii, and softer, more diffuse elevation. Type still does the work color won't — three families, three jobs. What changed from v2 (and why): · Background lifts from heavy warm "paper" to a bright, clean near-white — lighter, more spacious, more inviting. Still faintly warm, never stark. · The accent warms from muddy clay (#B05A41) to a brighter, friendlier CORAL (#EC5A3D) — still one disciplined accent, just more alive. · Radii step up a notch (cards 14, pill nav / chips / search) — modern but measured, never bubblegum. · Elevation goes softer and more diffuse (border-light + soft-shadow hybrid) so cards feel lifted, not boxed. Usage: ← tokens anchor to :root Optional postures: dark "reading lamp" mode institutional accent (schools opt in) faculty posture ============================================================================ */ /* ── Fonts (self-hosted by the product; copied from the codebase) ────────── Inter — structure, UI, body. Instrument Serif — the one human line. JetBrains Mono — data, labels, evidence (the "lab-coat" font). The latin woff2 files live in /fonts. For non-latin coverage the product also ships cyrillic/greek/vietnamese subsets — see README ICONOGRAPHY/TYPE. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/InstrumentSerif-latin.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/InstrumentSerif-italic-latin.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════════════ 1 · CORE TOKENS (light — the default "bright paper" posture) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Font families ── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Neutrals — a bright, airy near-white ramp. "Light paper, not stark." ── Lifted from v2's heavy warm paper to a clean, spacious off-white that still carries the faintest warmth so it never reads as a blank web form. ── */ --paper: #FBFAF8; /* page background — bright, airy, faintly warm */ --paper-2: #F1F0EB; /* hover fills, recessed wells, tinted nav rest */ --surface: #FFFFFF; /* cards, sheets, inputs */ --surface-2: #FAF9F6; /* table header rows, subtle insets */ --ink: #1C1B18; /* primary text + primary button. carries the work */ --ink-2: #3C3A33; /* body text */ --muted: #6A685F; /* secondary text, nav idle */ --muted-2: #9C9A8F; /* tertiary text, captions, placeholders */ --line: #ECEAE3; /* hairline borders — lighter, quieter than v2 */ --line-2: #DEDBD2; /* stronger borders, ghost-button edges */ /* ── The one disciplined accent — CORAL (Medkit default, refreshed) ── Was muddy clay (#B05A41); now a brighter, friendlier coral that still marks the single thing that matters on a screen and never celebrates. ── */ --accent: #EC5A3D; --accent-deep: #C9442A; /* hover / pressed, accent text on a tint */ --accent-soft: #FCE9E2; /* accent tint — chips, citation chips, active nav */ --accent-ink: #FFFFFF; /* text on a solid accent fill */ /* ── Verdict / status family — warm, never alarmist. Appears ONLY inside scoring. Never as chrome. ── */ --good: #3F7A52; --good-soft: #E7F1EA; /* PASS / met */ --warn: #B5852B; --warn-soft: #F7EFDB; /* PARTIAL */ --bad: #B14A33; --bad-soft: #F8E3DB; /* MISS / clinical danger */ /* ── Clinic specialty hues — categorical wayfinding only (case library, specialty tags). NEVER an accent / CTA. Reference via var(--clinic-*). ── */ --clinic-coral: #EC5A3D; --clinic-slate: #6B7B85; --clinic-sage: #7A8B6F; --clinic-ochre: #C49A3F; --clinic-amber: #C9882D; --clinic-indigo: #5363B0; --clinic-emerald: #3F8B6B; --clinic-rose: #C36450; --clinic-midnight: #2F3A4A; /* legacy alias — kept so older screens referencing --clinic-clay still resolve */ --clinic-clay: #EC5A3D; /* ── Type scale (--scale multiplies the whole ramp; density axis untouched) ── */ --scale: 1; /* @kind other */ --t-display: calc(56px * var(--scale)); --t-h1: calc(40px * var(--scale)); --t-h2: calc(28px * var(--scale)); --t-h3: calc(20px * var(--scale)); --t-body: calc(16px * var(--scale)); --t-small: calc(14px * var(--scale)); --t-label: calc(12px * var(--scale)); /* ── Weights ── */ --w-regular: 400; /* @kind font */ --w-medium: 500; /* @kind font */ --w-semibold: 600; /* @kind font */ --w-bold: 700; /* @kind font */ /* ── Radii — modern but measured. A notch rounder than v2; pills reserved for nav, chips, search & toggles. Cards sit at --r-lg (14). ── */ --r-sm: 6px; /* @kind radius */ --r-md: 10px; /* @kind radius */ --r-lg: 14px; /* @kind radius */ --r-xl: 20px; /* @kind radius */ --r-pill: 999px; /* @kind radius */ /* ── Spacing scale (4px base) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Elevation — softer & more diffuse than v2. Border-light, shadow-second: cards feel gently lifted off the paper, not boxed in. A standard still doesn't float — these stay restrained. ── */ --shadow-xs: 0 1px 2px rgba(28,27,22,.05); --shadow-sm: 0 1px 2px rgba(28,27,22,.04), 0 4px 10px -6px rgba(28,27,22,.08); --shadow-md: 0 8px 28px -10px rgba(28,27,22,.13); --shadow-lg: 0 24px 56px -24px rgba(28,27,22,.20); /* ── Motion — calm. Fades + a single gentle rise. No bounce. ── */ --ease: cubic-bezier(.2,.7,.1,1); /* @kind other */ --dur-fast: .15s; /* @kind other */ --dur: .2s; /* @kind other */ --dur-slow: .6s; /* @kind other */ } /* ═══════════════════════════════════════════════════════════════════════════ 2 · SEMANTIC TYPE — apply these classes; they read the tokens above ═══════════════════════════════════════════════════════════════════════════ */ .display, .h1, .h2, .h3, .body, .small, .label { font-family: var(--font-sans); color: var(--ink); } .display { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; } .h1 { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; } .h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } .h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; } .body { font-size: var(--t-body); font-weight: 400; line-height: 1.5; color: var(--ink-2); } .small { font-size: var(--t-small); font-weight: 400; line-height: 1.5; color: var(--muted); } .label { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* the serif gets ONE line per screen — the warmth in "warm-clinical". Never UI. */ .serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.005em; } /* mono signals "this is a measurement, not marketing" — codes, scores, timers. */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ═══════════════════════════════════════════════════════════════════════════ 3 · DARK — the "reading lamp" posture (light is primary; dark kept working) ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --paper: #17160F; --paper-2: #211F17; --surface: #242219; --surface-2: #1C1B13; --ink: #F2F0E8; --ink-2: #D2CFC5; --muted: #9E9C90; --muted-2: #706E63; --line: #2D2B21; --line-2: #3F3C30; --accent-soft: #3A241C; --good-soft: #1F2D23; --warn-soft: #2F2915; --bad-soft: #311E16; } /* ═══════════════════════════════════════════════════════════════════════════ 4 · ACCENT AXIS — coral is default; schools may opt into an institutional hue. Swaps three tokens, nothing else. (data-accent on :root) ═══════════════════════════════════════════════════════════════════════════ */ :root[data-accent="coral"] { --accent:#EC5A3D; --accent-deep:#C9442A; --accent-soft:#FCE9E2; } :root[data-accent="clay"] { --accent:#EC5A3D; --accent-deep:#C9442A; --accent-soft:#FCE9E2; } /* legacy alias → coral */ :root[data-accent="sage"] { --accent:#7A8B6F; --accent-deep:#5C6E55; --accent-soft:#E7ECDF; } :root[data-accent="ochre"] { --accent:#C49A3F; --accent-deep:#9B7820; --accent-soft:#F4EBD3; } :root[data-accent="slate"] { --accent:#6B7B85; --accent-deep:#4D5A63; --accent-soft:#E5E9EC; } :root[data-accent="emerald"] { --accent:#3F8B6B; --accent-deep:#2A6B50; --accent-soft:#DAEBE1; } :root[data-accent="indigo"] { --accent:#5363B0; --accent-deep:#3A4894; --accent-soft:#E3E6F5; } :root[data-accent="rose"] { --accent:#C36450; --accent-deep:#9E4636; --accent-soft:#F6E1DB; } :root[data-accent="amber"] { --accent:#C9882D; --accent-deep:#9C6818; --accent-soft:#F6E6C8; } :root[data-accent="midnight"] { --accent:#2F3A4A; --accent-deep:#1A2330; --accent-soft:#E1E6ED; } /* ═══════════════════════════════════════════════════════════════════════════ 5 · DENSITY AXIS — student = regular/comfy, faculty = compact. ═══════════════════════════════════════════════════════════════════════════ */ [data-density="compact"] { --pad-card: 16px; --pad-btn-y: 8px; --pad-btn-x: 14px; --gap-row: 10px; } [data-density="regular"] { --pad-card: 24px; --pad-btn-y: 10px; --pad-btn-x: 16px; --gap-row: 14px; } [data-density="comfy"] { --pad-card: 32px; --pad-btn-y: 12px; --pad-btn-x: 18px; --gap-row: 18px; } /* Base reset niceties shared by previews */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); color: var(--ink); font-feature-settings: 'ss01','cv11','cv02'; }