/* VibeVal — Corporate refresh design tokens * Light-first, near-monochrome surface, single deep-blue accent. * Posture: Stripe / Linear — precise, hairline-driven, product-led. * Apply with [data-theme="dark"] on for terminals / low-light QA. */ @font-face { font-family: "Inter"; src: url("/fonts/InterVariable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* NEUTRALS */ --neutral-0: #ffffff; --neutral-25: #fafafa; --neutral-50: #f5f5f5; --neutral-100: #ebebec; --neutral-200: #d6d7d9; --neutral-300: #a8aaad; --neutral-400: #737578; --neutral-500: #4a4c4f; --neutral-600: #313336; --neutral-700: #1f2124; --neutral-800: #141518; --neutral-900: #0a0b0d; --neutral-950: #050608; /* BRAND — deep blue */ --accent-50: #eff4fb; --accent-100: #dbe6f5; --accent-200: #b6cae8; --accent-300: #8aabd9; --accent-400: #5586c5; --accent-500: #2e63ad; --accent-600: #1f4f96; --accent-700: #173d77; --accent-800: #112d59; --accent-900: #0c2040; /* SEMANTIC */ --success-500: #15803d; --success-600: #166534; --success-bg: rgba(21, 128, 61, 0.08); --warn-500: #b45309; --warn-600: #92400e; --warn-bg: rgba(180, 83, 9, 0.08); --danger-500: #b91c1c; --danger-600: #991b1b; --danger-bg: rgba(185, 28, 28, 0.08); --info-500: var(--accent-500); --info-bg: var(--accent-50); /* Risk class palette */ --risk-a: var(--neutral-400); --risk-b: var(--warn-500); --risk-c: var(--danger-500); /* SURFACES — light theme default. line bumped to neutral-200 for visible * card borders against near-white surface; intentionally one step warmer * than the spec for readability. */ --bg: var(--neutral-0); --surface: var(--neutral-25); --surface-2: var(--neutral-50); --line: var(--neutral-200); --line-strong: var(--neutral-300); --fg: var(--neutral-900); --fg-muted: var(--neutral-500); --fg-subtle: var(--neutral-400); --fg-onaccent: #ffffff; --accent: var(--accent-600); --accent-hover: var(--accent-700); --accent-bg: var(--accent-50); /* Legacy aliases — keep page CSS that references these working */ --bg-2: var(--surface); --muted: var(--fg-muted); --code-bg: var(--surface); --success: var(--success-500); --warn: var(--warn-500); --danger: var(--danger-500); --accent-soft: var(--accent-50); /* TYPE */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-eyebrow: 0.08em; /* RADII */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 10px; --radius-full: 9999px; /* BORDERS / SHADOWS */ --border-hairline: 1px solid var(--line); --border-strong: 1px solid var(--line-strong); --shadow-xs: 0 1px 0 rgba(10, 11, 13, 0.04); --shadow-sm: 0 1px 2px rgba(10, 11, 13, 0.06); --shadow-md: 0 4px 12px -4px rgba(10, 11, 13, 0.08); --shadow-lg: 0 12px 32px -10px rgba(10, 11, 13, 0.12); --shadow-focus: 0 0 0 3px rgba(31, 79, 150, 0.18); /* MOTION */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; } [data-theme="dark"] { --bg: var(--neutral-900); --surface: var(--neutral-800); --surface-2: var(--neutral-700); --line: var(--neutral-700); --line-strong: var(--neutral-600); --fg: #ededee; --fg-muted: var(--neutral-300); --fg-subtle: var(--neutral-400); --accent: var(--accent-400); --accent-hover: var(--accent-300); --accent-bg: rgba(85, 134, 197, 0.10); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 18px 40px -12px rgba(0,0,0,0.6); --shadow-focus: 0 0 0 3px rgba(85, 134, 197, 0.25); --success-bg: rgba(34, 197, 94, 0.10); --warn-bg: rgba(217, 119, 6, 0.12); --danger-bg: rgba(220, 38, 38, 0.12); --bg-2: var(--surface); --code-bg: var(--surface); } html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { letter-spacing: var(--tracking-tight); } ::selection { background: var(--accent); color: var(--fg-onaccent); } /* Theme toggle button — used in every page nav */ [data-theme-toggle] { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; padding: 0; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } [data-theme-toggle]:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } [data-theme-toggle]:focus-visible { outline: none; box-shadow: var(--shadow-focus); } [data-theme-toggle] .sun, [data-theme-toggle] .moon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; } [data-theme-toggle] .sun { display: none; } [data-theme="dark"] [data-theme-toggle] .sun { display: inline-flex; } [data-theme="dark"] [data-theme-toggle] .moon { display: none; } /* Spacing in nav contexts — buttons don't get the anchor margin-left, give them their own gap */ nav .links [data-theme-toggle] { margin-left: 1.25rem; }