/* ================================================================= * www/styles/tokens.css * * Shared design tokens for the form-is-type NODS court demo. * * Adapted from the Judiciary Design System: * vendor/judiciary-design-system/tokens/variables.css * (auto-generated upstream from Figma file ZStJy2fgfm8jCzcslEdO4M). * * Deviations from upstream: * - Web fonts (Roboto / Inter / Mulish) swapped for `system-ui`. * The type scale and line-heights are preserved. * - Reset, , , and rules from upstream * are NOT copied here — they belong in base.css (or don't belong * in this repo at all). This file is tokens only. * * Palette stays judiciary burgundy on purpose: every page in www/ * is a NODS court workflow, and the color matches the domain. * ================================================================= */ :root { /* -- Brand palette (judiciary burgundy) -- */ --color-primary-base: #751C24; --color-primary-light: #A02842; --color-primary-superlight: #F9EDEF; /* -- Neutrals -- */ --color-black: #282624; --color-white: #FFFFFF; --color-heading: #152536; --color-grey-darkest: #51565F; --color-grey-dark: #939599; --color-grey: #D4D6D9; --color-grey-light: #EAECEF; --color-grey-lighter: #F7F7F9; --color-grey-800: #343A40; /* -- Backgrounds -- */ --color-bg-page: #F7F7F9; --color-bg-surface: #FFFFFF; --color-bg-dark: #101521; /* -- Borders -- */ --color-border-light: #DEE2E6; --color-border-primary: #751C24; /* -- Status palette -- */ --color-status-completed-bg: #016F5E; --color-status-completed: #FFFFFF; --color-status-pending-bg: #FFD975; --color-status-pending: #282624; --color-status-not-started-bg: #D4D6D9; --color-status-not-started: #282624; --color-danger-bg: #B22222; --color-danger: #FFFFFF; /* -- Typography (system-ui; JDS sizes + line-heights preserved) -- */ --font-family-primary: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-family-nav: system-ui, -apple-system, Segoe UI, sans-serif; --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-h1: 700 42px/50px var(--font-family-primary); --font-h2: 700 35px/42px var(--font-family-primary); --font-h2-5: 700 30px/36px var(--font-family-primary); --font-h3: 700 24px/29px var(--font-family-primary); --font-h4: 700 20px/24px var(--font-family-primary); --font-h5: 700 18px/28px var(--font-family-primary); --font-paragraph: 400 16px/24px var(--font-family-primary); --font-small: 400 14px/20px var(--font-family-primary); --font-small-bold: 700 14px/20px var(--font-family-primary); --font-xs: 400 12px/18px var(--font-family-primary); --font-breadcrumb: 500 14px/16px var(--font-family-nav); /* -- Spacing scale -- */ --space-xs: 6px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 36px; --space-2xl: 48px; --space-page-x: 32px; /* -- Form controls -- */ --control-height: 40px; /* -- Border radius -- */ --radius-sm: 6px; --radius-md: 8px; /* -- Shadows -- */ --shadow-regular: 0 4px 10px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 3px var(--color-primary-superlight); }