/* Corporater Design System — Color, Type, Shape, Spacing, Elevation, Motion tokens. Sourced from the official Corporater design-system project via DesignSync. Roboto is loaded from Google Fonts in the page (the production system self-hosts it; substituted here for a self-contained web app — flagged to the operator). */ :root { /* Neutral ramp */ --neutral-10: rgb(23, 25, 28); --neutral-20: rgb(46, 50, 56); --neutral-30: rgb(69, 75, 84); --neutral-40: rgb(92, 100, 112); --neutral-60: rgb(143, 151, 163); --neutral-75: rgb(185, 190, 198); --neutral-85: rgb(213, 216, 221); --neutral-95: rgb(241, 242, 244); --neutral-98: rgb(249, 250, 250); --neutral-100: rgb(255, 255, 255); /* Primary (Corporater navy -> blue) */ --primary-18: rgb(1, 54, 102); --primary-25: rgb(0, 64, 128); --primary-40: rgb(0, 103, 204); --primary-85: rgb(178, 217, 255); --primary-94: rgb(224, 240, 255); --primary-96: rgb(235, 245, 255); --primary-98: rgb(243, 249, 255); --red-40: rgb(194, 41, 10); --red-85: rgb(251, 194, 182); --red-95: rgb(254, 235, 231); --green-30: rgb(23, 130, 94); --green-75: rgb(166, 217, 200); --green-90: rgb(212, 247, 235); --yellow-40: rgb(204, 170, 0); --yellow-70: rgb(240, 219, 117); --yellow-90: rgb(255, 246, 204); --shadow-black-10: rgba(0, 0, 0, 0.10); --shadow-black-25: rgba(0, 0, 0, 0.25); --shadow-blue-15: rgba(0, 103, 204, 0.15); /* Semantic — text */ --text-primary: var(--neutral-10); --text-secondary: var(--neutral-40); --text-disabled: var(--neutral-60); --text-inverse: var(--neutral-100); --text-interactive: var(--primary-40); --text-brand: var(--primary-18); --text-danger: var(--red-40); --text-success: var(--green-30); --text-warning: var(--yellow-40); /* Semantic — fill/surface */ --fill-surface-00: var(--neutral-100); --fill-surface-01: var(--neutral-98); --fill-surface-02: var(--neutral-95); --fill-subtle: var(--neutral-95); --fill-subtle-primary: var(--primary-96); --fill-subtle-primary-hover: var(--primary-94); --fill-subtle-danger: var(--red-95); --fill-subtle-success: var(--green-90); --fill-subtle-warning: var(--yellow-90); --fill-brand: var(--primary-18); --fill-brand-hover: var(--primary-25); --fill-interactive: var(--primary-40); --fill-destructive: var(--red-40); --fill-success: var(--green-30); --fill-disabled: var(--neutral-95); --fill-inverse: var(--neutral-10); --fill-overlay: rgba(23, 25, 28, 0.50); /* Semantic — border/icon */ --border-default: var(--neutral-85); --border-subtle: var(--neutral-95); --border-strong: var(--neutral-75); --border-brand: var(--primary-18); --border-interactive: var(--primary-40); --border-focus: var(--primary-40); --border-danger: var(--red-40); --border-success: var(--green-30); --border-disabled: var(--neutral-75); --icon-default: var(--neutral-40); --icon-primary: var(--neutral-10); --icon-interactive: var(--primary-40); --icon-brand: var(--primary-18); --icon-inverse: var(--neutral-100); --status-error: rgb(194, 41, 10); --status-success: rgb(23, 130, 94); --status-warning: rgb(204, 170, 0); --status-nodata: rgb(92, 100, 112); --status-unknown: rgb(0, 103, 204); /* Type */ --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-condensed: "Roboto Condensed", "Roboto", system-ui, sans-serif; --font-mono: "Cascadia Code", "SF Mono", ui-monospace, Consolas, monospace; --font-size-overline: 12px; --font-size-body-s: 12px; --font-size-body-m: 14px; --font-size-body-l: 16px; --font-size-heading-s: 18px; --font-size-heading-m: 22px; --font-size-heading-l: 28px; --font-size-heading-xl: 36px; --line-height-tight: 1.15; --line-height-normal: 1.4; --line-height-loose: 1.6; --letter-spacing-tight: -0.01em; --letter-spacing-overline: 0.08em; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Shape */ --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; /* Spacing (8px base, 4px subscale) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-2xl: 32px; --spacing-3xl: 48px; /* Elevation (modest) */ --elev-1: 0 1px 2px var(--shadow-black-10); --elev-2: 0 2px 6px var(--shadow-black-10); --elev-3: 0 4px 12px var(--shadow-black-10), 0 1px 3px var(--shadow-black-10); --elev-focus: 0 0 0 3px var(--shadow-blue-15); /* Motion */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 120ms; --duration-normal: 200ms; } html, body { font-family: var(--font-sans); color: var(--text-primary); background: var(--fill-surface-01); font-size: var(--font-size-body-m); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .headingXL, h1 { font: 700 36px/1.15 var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); margin: 0; } .headingL, h2 { font: 700 28px/1.20 var(--font-sans); letter-spacing: -0.005em; color: var(--text-primary); margin: 0; } .headingM, h3 { font: 700 22px/1.25 var(--font-sans); color: var(--text-primary); margin: 0; } .headingS, h4 { font: 700 18px/1.35 var(--font-sans); color: var(--text-primary); margin: 0; } .overline { font: 700 12px/1.4 var(--font-sans); letter-spacing: var(--letter-spacing-overline); text-transform: uppercase; color: var(--text-secondary); } .bodyL { font: 400 16px/1.5 var(--font-sans); } .bodyM { font: 400 14px/1.43 var(--font-sans); } .bodyS { font: 400 12px/1.5 var(--font-sans); color: var(--text-secondary); } code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--font-size-body-s); } a { color: var(--text-interactive); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; box-shadow: var(--elev-focus); }