/* ========================================================================== Mirovita Design Tokens -------------------------------------------------------------------------- Every visual decision in the product resolves to a variable declared here. Change the brand from this file alone: palette, type, spacing, radii, shadows, gradients, and motion. Layering: 1. Primitives : raw scale values (--teal-600, --space-4). Never used directly in components. 2. Semantics : role-based aliases (--color-surface, --text-body). Components reference ONLY these. 3. Components : per-component knobs (--button-height-md) that default to semantics but can be retuned in isolation. ========================================================================== */ :root { /* ====================================================================== 1. PRIMITIVES: COLOR Brand teal is #0F6B62, taken from the logo SVG. The scale is built around it: 600 is the brand value. ====================================================================== */ --teal-50: #ecf7f5; --teal-100: #d0ebe7; --teal-200: #a3d8d0; --teal-300: #6fbfb4; --teal-400: #3fa295; --teal-500: #1d8478; --teal-600: #0f6b62; /* BRAND */ --teal-700: #0c564f; --teal-800: #0a423d; --teal-900: #07302c; --teal-950: #041c1a; /* Warm neutral ramp. Slightly green-shifted so it sits with the teal instead of fighting it; pure grey reads cold and clinical. */ --sand-50: #fbfaf7; --sand-100: #f5f3ee; --sand-200: #ebe8e0; --sand-300: #dbd7cc; --ink-50: #f6f8f7; --ink-100: #e9edeb; --ink-200: #d3dad8; --ink-300: #b0bbb8; --ink-400: #869390; --ink-500: #64716e; --ink-600: #4c5956; --ink-700: #3a4644; --ink-800: #262f2d; --ink-900: #161d1c; --ink-950: #0b1110; /* Accent: warm amber. Used sparingly: badges, highlight rules, the "early" side of comparisons. Never for body text. */ --amber-50: #fdf6ec; --amber-100: #f9e7cb; --amber-200: #f2cd93; --amber-300: #e9ae57; --amber-400: #dc9130; --amber-500: #c1751d; --amber-600: #9a5a16; /* Signal colors. Survival visualisations use --signal-early/--signal-late rather than success/danger: this is prognosis data, not UI state. */ --green-100: #dcf3e4; --green-500: #2f8a52; --green-700: #1f6039; --red-100: #fbe3e0; --red-500: #c0442f; --red-700: #8e2f1f; --blue-100: #dfeaf7; --blue-500: #2f6ba8; --blue-700: #21507f; --white: #ffffff; --black: #000000; /* ====================================================================== 1. PRIMITIVES: TYPOGRAPHY System stacks only: the CSP forbids third-party font hosts, and a self-hosted webfont would cost a render-blocking round trip on the landing page. "Avenir Next" is the closest system match to the geometric wordmark. ====================================================================== */ --font-display: "Avenir Next", Avenir, "Futura", "Century Gothic", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid scale. clamp() means no breakpoint-by-breakpoint type overrides. */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: clamp(1.125rem, 0.30vw + 1.05rem, 1.25rem); --text-xl: clamp(1.25rem, 0.55vw + 1.12rem, 1.5rem); --text-2xl: clamp(1.5rem, 1.00vw + 1.25rem, 2rem); --text-3xl: clamp(1.875rem, 1.70vw + 1.45rem, 2.75rem); --text-4xl: clamp(2.25rem, 2.80vw + 1.55rem, 3.75rem); --text-5xl: clamp(2.75rem, 4.20vw + 1.70rem, 5rem); --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* matches the wordmark's letterspacing */ /* ====================================================================== 1. PRIMITIVES: SPACING (4px base) ====================================================================== */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Section rhythm scales with the viewport so mobile isn't over-padded. */ --section-y: clamp(3.5rem, 7vw, 7rem); --section-y-tight: clamp(2.5rem, 4.5vw, 4rem); /* ====================================================================== 1. PRIMITIVES: RADII, BORDERS, SHADOWS ====================================================================== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-2xl: 36px; --radius-pill: 999px; --radius-circle: 50%; --border-width: 1px; --border-width-thick: 2px; --border-color: var(--ink-200); --border-color-subtle: var(--ink-100); --border-color-strong: var(--ink-300); /* Shadows are teal-tinted rather than neutral black: a pure black shadow over the warm background reads muddy. */ --shadow-xs: 0 1px 2px rgba(7, 48, 44, 0.06); --shadow-sm: 0 2px 6px rgba(7, 48, 44, 0.07); --shadow-md: 0 6px 18px rgba(7, 48, 44, 0.08), 0 2px 5px rgba(7, 48, 44, 0.05); --shadow-lg: 0 16px 40px rgba(7, 48, 44, 0.10), 0 4px 12px rgba(7, 48, 44, 0.06); --shadow-xl: 0 28px 70px rgba(7, 48, 44, 0.14), 0 8px 22px rgba(7, 48, 44, 0.07); --shadow-inset: inset 0 1px 2px rgba(7, 48, 44, 0.07); --shadow-focus: 0 0 0 3px var(--teal-200); /* ====================================================================== 1. PRIMITIVES: GRADIENTS ====================================================================== */ --gradient-brand: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-800) 100%); --gradient-brand-vivid: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-700) 60%, var(--teal-900) 100%); --gradient-hero: radial-gradient( ellipse 120% 80% at 15% -10%, var(--teal-100) 0%, transparent 60% ), radial-gradient(ellipse 90% 70% at 95% 5%, var(--amber-50) 0%, transparent 55%), linear-gradient(180deg, var(--sand-50) 0%, var(--white) 100%); --gradient-surface: linear-gradient(180deg, var(--white) 0%, var(--sand-50) 100%); --gradient-fade-teal: linear-gradient(180deg, var(--teal-50) 0%, transparent 100%); /* Early -> late survival ramp, used by the stat bars. */ --gradient-survival: linear-gradient(90deg, var(--green-500) 0%, var(--amber-400) 55%, var(--red-500) 100%); /* ====================================================================== 1. PRIMITIVES: MOTION ====================================================================== */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 400ms; --duration-slower: 700ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); --transition-transform: transform var(--duration-base) var(--ease-out); --transition-all: all var(--duration-base) var(--ease-standard); /* ====================================================================== 1. PRIMITIVES: LAYOUT ====================================================================== */ --container-max: 1200px; --container-narrow: 780px; --container-prose: 65ch; --gutter: clamp(1.25rem, 4vw, 2.5rem); --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ====================================================================== 2. SEMANTIC ALIASES: components reference these, not primitives. ====================================================================== */ --color-brand: var(--teal-600); --color-brand-hover: var(--teal-700); --color-brand-active: var(--teal-800); --color-brand-subtle: var(--teal-50); --color-brand-muted: var(--teal-100); --color-on-brand: var(--white); --color-accent: var(--amber-400); --color-accent-subtle: var(--amber-50); --color-on-accent: var(--ink-950); --color-page: var(--sand-50); --color-surface: var(--white); --color-surface-raised: var(--white); --color-surface-sunken: var(--sand-100); --color-surface-inverse: var(--teal-900); --color-surface-brand: var(--teal-600); --text-heading: var(--ink-950); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-inverse: var(--white); --text-on-brand: var(--white); --text-link: var(--teal-600); --text-link-hover: var(--teal-800); /* Prognosis semantics: deliberately distinct from UI success/danger. --signal-early is teal, not green, because green against --signal-late is the classic red/green pair: separation under deuteranopia is dE 5.0, below the floor at which a reader can tell two data colours apart at all. Teal against the same red is 11.1, and it puts the brand hue on the good outcome. Green stays as --color-success for UI state, which is never shown beside the late colour. */ --signal-early: var(--teal-500); --signal-mid: var(--amber-400); --signal-late: var(--red-500); --signal-early-bg: var(--teal-100); --signal-late-bg: var(--red-100); --color-success: var(--green-500); --color-success-bg: var(--green-100); --color-warning: var(--amber-400); --color-warning-bg: var(--amber-50); --color-danger: var(--red-500); --color-danger-bg: var(--red-100); --color-info: var(--blue-500); --color-info-bg: var(--blue-100); --focus-ring-color: var(--teal-500); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ====================================================================== 3. COMPONENT KNOBS ====================================================================== */ /* Hero MRI illustration. The artwork is a PNG that ships its own palette, so the only knob left is its size. If the brand teal ever moves, this image has to be re-exported -- it will not follow the primitives above. Caps the illustration in the hero's second column so it stays subordinate to the headline rather than competing with it. */ --mri-max-width: 30rem; /* Numbered process steps. The badge is a fixed square so the circle stays a circle whatever digit is in it, and it doubles as the grid column the badge sits in, which is what keeps the number on the title's line. Growing it eats the text column, and `steps` is four-up on desktop. */ --step-badge-size: 2.5rem; /* Centers map. See app/services/geomap.py for why the map is inline SVG. */ --map-land: var(--teal-50); --map-border: var(--teal-200); --map-border-width: 1.25; --map-dot: var(--color-brand); --map-dot-dim: var(--ink-200); --map-dot-active: var(--teal-800); /* SVG user units, not px: the viewBox is 900 wide whatever the rendered size, so these stay proportional as the map scales. The map renders about 460px wide in the half-width `locator` column, so multiply by ~0.51 for pixels. --map-dot-radius is the source of truth for the resting size; the macro also carries it as an `r` attribute so dots still appear if CSS geometry properties are unavailable. Keep the two in step. --map-dot-radius-hover must stay below LABEL_CLEARANCE in app/services/geomap.py, which is what holds the hover name off the dot. That file derives its clearance from this, so raising the hover radius is safe; lowering LABEL_CLEARANCE past it is not. */ --map-dot-radius: 8; --map-dot-radius-active: 9; --map-dot-radius-hover: 13; /* The ring that springs open behind a hovered dot. Sits at 0 at rest. */ --map-halo: var(--teal-400); --map-halo-opacity: 0.35; --map-halo-radius-hover: 22; /* Invisible pointer target. Bigger than the dot, which is only a few pixels across on screen; smaller than the hover ring, because a wide one swallows neighbouring dots in a dense metro and makes them unclickable. */ --map-hit-radius: 12; /* Caps the map beside the ZIP form. Sized to fill the map column of `locator` without the section turning into a wall of map. */ --map-max-width: 40rem; --map-label-active: var(--teal-950); /* Halo behind label text, so a name stays legible across dots and coastline. Matches --map-land; if the land colour changes, change this with it. */ --map-label-halo: var(--teal-50); --map-label-halo-width-active: 5; /* -lg is the header (.brand--lg), which drops the standalone mark; the mark size is the footer, which drops the wordmark. Deliberately independent: the footer mark is meant to read larger than the header lockup, so shrinking one must not shrink the other. 1.625rem is 26px and 2.5rem is 40px at the default root size; rem so both still track user font scaling. */ --brand-wordmark-height: 1.5rem; --brand-wordmark-height-lg: 1.625rem; --brand-mark-size: 2.5rem; --button-height-sm: 2.25rem; --button-height-md: 2.875rem; --button-height-lg: 3.5rem; --button-padding-x-sm: var(--space-4); --button-padding-x-md: var(--space-6); --button-padding-x-lg: var(--space-8); --button-radius: var(--radius-pill); --button-font: var(--font-body); --button-weight: var(--weight-semibold); --button-tracking: 0.01em; --card-bg: var(--color-surface); --card-radius: var(--radius-lg); --card-padding: clamp(1.25rem, 2.5vw, 2rem); --card-border: var(--border-width) solid var(--border-color-subtle); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-lg); --input-height: 3rem; --input-radius: var(--radius-md); --input-bg: var(--color-surface); --input-border: var(--border-width) solid var(--border-color); --input-border-focus: var(--teal-500); --input-padding-x: var(--space-4); --badge-radius: var(--radius-pill); --badge-padding: 0.3rem 0.75rem; --badge-font-size: var(--text-xs); --badge-tracking: var(--tracking-wide); --header-height: 4.5rem; --header-bg: rgba(255, 255, 255, 0.82); --header-blur: 14px; --header-border: var(--border-width) solid var(--border-color-subtle); /* Survival comparison bars. The radius is on the data end only, square at the baseline: a pill rounds the zero end too, which reads as a bar that starts somewhere above zero and overstates every small value. 3.4% is the smallest figure in the seed data and has to survive that honestly. */ --stat-bar-height: 0.625rem; --stat-bar-radius: var(--radius-xs); --stat-bar-track: var(--ink-100); --stat-bar-min-width: 3px; } /* Honour the OS "reduce motion" setting by collapsing every duration. Declared here so no component has to remember to do it. */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-slower: 1ms; } }