/* ============================================================================ GRC ENGINEERING DESIGN SYSTEM — vendored token layer Source: github.com/grcengineering/grce-design-system (tokens/*.css) Vendored verbatim. Do not hand-edit — re-sync from the design system. Two CSS scopes only: :root (light) and [data-theme="dark"]. "system" is NOT a CSS state — the no-flash script in resolves the user's choice to a concrete data-theme on before paint. Never add a @media (prefers-color-scheme: dark) block here; it would double-apply. ============================================================================ */ /* ---------------------------------------------------------------- FONTS ---- */ @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-vf.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-vf.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-vf-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo-vf.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-vf.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- COLORS ---- */ :root { /* Brand: Legacy GRC (orange) */ --grc-orange-50: #FFF4E6; --grc-orange-100: #FFE6CC; --grc-orange-200: #FFD3A6; --grc-orange-300: #FFBE7B; --grc-orange-400: #FFA84F; /* core — rgb(255,168,79) "Legacy GRC" */ --grc-orange-500: #F8932F; --grc-orange-600: #E07C18; --grc-orange-700: #B5610F; --grc-orange-800: #8A490C; --grc-orange-900: #5E320A; /* Brand: Engineering (blue) */ --eng-blue-50: #E9F6FB; --eng-blue-100: #CDEAF4; --eng-blue-200: #9DD6EA; --eng-blue-300: #63BEDC; --eng-blue-400: #2FA6CF; --eng-blue-500: #1B95C1; /* core — rgb(27,149,193) "Engineering" */ --eng-blue-600: #157AA1; --eng-blue-700: #126181; --eng-blue-800: #114E67; --eng-blue-900: #0E3A4C; /* Brand: GRC Engineering fusion gradient */ --gradient-fusion: linear-gradient(100deg, var(--grc-orange-400) 0%, #E58A56 38%, #6FA9C2 64%, var(--eng-blue-500) 100%); --gradient-fusion-soft: linear-gradient(100deg, rgba(255,168,79,0.16) 0%, rgba(27,149,193,0.16) 100%); --gradient-fusion-text: linear-gradient(96deg, var(--grc-orange-500) 0%, var(--eng-blue-500) 92%); --gradient-ink-glow: radial-gradient(120% 120% at 0% 0%, rgba(255,168,79,0.12) 0%, transparent 42%), radial-gradient(120% 120% at 100% 0%, rgba(27,149,193,0.14) 0%, transparent 46%); /* Neutrals: cool slate (engineering ink) */ --slate-0: #FFFFFF; --slate-25: #FBFCFD; --slate-50: #F6F8FA; --slate-100: #EEF1F4; --slate-150: #E3E8ED; --slate-200: #D6DDE4; --slate-300: #BAC4CE; --slate-400: #94A2AF; --slate-500: #6B7A88; --slate-600: #4F5D6A; --slate-700: #394550; --slate-800: #232D36; --slate-900: #161D24; --slate-950: #0C1117; /* engineering ink */ --ink: #0B0F14; /* deepest canvas */ /* Semantic status */ --green-100: #D6F1E3; --green-500: #1F9D6B; /* pass / compliant */ --green-600: #16855A; --green-700: #0F6B49; --red-100: #FBDFE0; --red-500: #E5484D; /* fail / non-compliant */ --red-600: #CC2F36; --red-700: #A8262D; --amber-100: #FCEFD0; --amber-500: #E8A317; /* at-risk / drift (distinct from brand orange) */ --amber-600: #C9890C; /* ---- Semantic aliases — reference these in components ---- */ --brand-grc: var(--grc-orange-400); --brand-eng: var(--eng-blue-500); --brand-accent: var(--eng-blue-500); --brand-accent-strong: var(--eng-blue-600); --surface-page: var(--slate-25); --surface-card: var(--slate-0); --surface-sunken: var(--slate-50); --surface-raised: var(--slate-0); --surface-inset: var(--slate-100); --surface-ink: var(--slate-950); --surface-ink-2: var(--slate-900); --text-strong: var(--slate-900); --text-body: var(--slate-700); --text-muted: var(--slate-500); --text-faint: var(--slate-400); --text-on-ink: #E7EDF2; --text-on-ink-muted: #93A2AE; --text-on-accent: #FFFFFF; --text-link: var(--eng-blue-600); --border-subtle: var(--slate-150); --border-default: var(--slate-200); --border-strong: var(--slate-300); --border-ink: rgba(255,255,255,0.10); --border-accent: var(--eng-blue-500); --status-pass-fg: var(--green-700); --status-pass-bg: var(--green-100); --status-fail-fg: var(--red-700); --status-fail-bg: var(--red-100); --status-risk-fg: var(--amber-600); --status-risk-bg: var(--amber-100); --status-info-fg: var(--eng-blue-700); --status-info-bg: var(--eng-blue-50); --status-legacy-fg: var(--grc-orange-700); --status-legacy-bg: var(--grc-orange-100); --focus-ring: 0 0 0 3px rgba(27,149,193,0.35); color-scheme: light; } [data-theme="dark"] { color-scheme: dark; --brand-accent: var(--eng-blue-400); --brand-accent-strong: var(--eng-blue-300); --surface-page: #0A0E16; --surface-card: #111722; --surface-sunken: #0C111B; --surface-raised: #161E2B; --surface-inset: #1A2330; --surface-ink: #060910; --surface-ink-2: #0C121B; --text-strong: #F1F5F9; --text-body: #C4CDD8; --text-muted: #8B97A4; --text-faint: #5E6B78; --text-link: var(--eng-blue-300); --border-subtle: rgba(255,255,255,0.07); --border-default: rgba(255,255,255,0.11); --border-strong: rgba(255,255,255,0.17); --border-accent: var(--eng-blue-400); --status-pass-fg: #4FD396; --status-pass-bg: rgba(31,157,107,0.16); --status-fail-fg: #FF7E82; --status-fail-bg: rgba(229,72,77,0.18); --status-risk-fg: #F2C14E; --status-risk-bg: rgba(232,163,23,0.17); --status-info-fg: #63BEDC; --status-info-bg: rgba(27,149,193,0.16); --status-legacy-fg: #FFBE7B; --status-legacy-bg: rgba(255,168,79,0.15); --focus-ring: 0 0 0 3px rgba(99,190,220,0.45); } /* Production AA bridge — slate-500 is 4.41:1 on white, just under AA. Every shipped GRCE property bridges muted text to slate-600 in light. */ :root { --color-text-muted: var(--slate-600); } [data-theme="dark"] { --color-text-muted: var(--text-muted); } /* ----------------------------------------------------------- TYPOGRAPHY ---- */ :root { --font-display: "General Sans", "Archivo", ui-sans-serif, system-ui, sans-serif; --font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Martian Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.9375rem; --text-3xl: 2.5rem; --text-4xl: 3.25rem; --text-5xl: 4.25rem; --text-6xl: 5.5rem; --leading-none: 1; --leading-tight: 1.12; --leading-snug: 1.28; --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; --tracking-widest: 0.18em; --display-weight: var(--fw-semibold); --heading-weight: var(--fw-medium); --heading-tracking: var(--tracking-tight); --body-family: var(--font-body); --body-size: var(--text-base); --body-leading: var(--leading-relaxed); --ui-family: var(--font-sans); --eyebrow-size: var(--text-2xs); --eyebrow-weight: var(--fw-medium); --eyebrow-tracking: var(--tracking-wider); } /* ------------------------------------------------------ SPACING & SIZING ---- */ :root { --space-0-5: 0.125rem; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-2-5: 0.625rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --container-md: 820px; --container-lg: 1080px; --container-xl: 1280px; --gutter: var(--space-6); --section-y: var(--space-24); --control-h-sm: 30px; --control-h-md: 38px; --control-h-lg: 46px; } /* --------------------------------------------------------------- EFFECTS ---- */ :root { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 9px; --radius-lg: 13px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px; --border-w: 1px; --border-w-thick: 1.5px; --shadow-xs: 0 1px 2px rgba(12,17,23,0.05); --shadow-sm: 0 1px 2px rgba(12,17,23,0.06), 0 1px 1px rgba(12,17,23,0.04); --shadow-md: 0 4px 12px -2px rgba(12,17,23,0.08), 0 2px 4px -2px rgba(12,17,23,0.06); --shadow-lg: 0 12px 28px -6px rgba(12,17,23,0.12), 0 4px 10px -4px rgba(12,17,23,0.07); --shadow-xl: 0 24px 56px -12px rgba(12,17,23,0.18), 0 8px 20px -8px rgba(12,17,23,0.10); --glow-eng: 0 8px 30px -8px rgba(27,149,193,0.45); --glow-grc: 0 8px 30px -8px rgba(255,168,79,0.45); --blur-md: 14px; } /* ---------------------------------------------------------------- MOTION ---- */ :root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-instant: 80ms; --dur-fast: 130ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 520ms; --transition-control: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } /* ------------------------------------------------------------------ BASE ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--body-family); font-size: var(--body-size); line-height: var(--body-leading); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; transition: background-color 0.25s ease, color 0.25s ease; } button, input, select, textarea, label { font-family: var(--ui-family); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); line-height: var(--leading-tight); margin: 0; text-wrap: balance; } p { text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } code, kbd, samp { font-family: var(--font-mono); } ::selection { background: rgba(27,149,193,0.22); } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }