/* ============================================================= Volvo Forming Quality App — Design Tokens Drop in at: frontend/static/css/tokens.css Linked from each template's as the FIRST stylesheet. ============================================================= */ :root { /* ── Brand ─────────────────────────────────────── */ --volvo-navy: #003057; --volvo-navy-deep: #00264A; --volvo-navy-soft: #1A4A7A; --volvo-blue: #0078C8; --volvo-blue-soft: #E3F2FD; --volvo-blue-tint: #F0F8FF; /* ── Text & surface (light theme) ──────────────── */ --ink: #0F1B2A; --ink-2: #1A202C; --muted: #5A6B7E; --muted-2: #94A3B8; --line: #DCE4EE; --line-soft: #EEF2F7; --surface: #FFFFFF; --surface-alt: #F4F7FB; --surface-tint:#FAFBFD; --overlay: rgba(15, 27, 42, .45); /* ── Status ────────────────────────────────────── */ --ok: #1F8A4C; --ok-bg: #E6F4ED; --ok-line: #BDE5C7; --warn: #B7791F; --warn-bg: #FFF8E1; --warn-line: #F2DDA4; --bad: #C53030; --bad-bg: #FDECEA; --bad-line: #F5C6CB; --info: #1565C0; --info-bg: #E3F2FD; --info-line: #90CAF9; /* ── Radii / Shadows ───────────────────────────── */ --radius-card: 12px; --radius-input: 8px; --radius-chip: 20px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(15,27,42,.06), 0 1px 1px rgba(15,27,42,.04); --shadow-2: 0 4px 12px rgba(15,27,42,.08), 0 2px 4px rgba(15,27,42,.04); --shadow-pop: 0 12px 32px rgba(15,27,42,.18); --focus-ring: 0 0 0 3px rgba(0, 120, 200, .35); /* ── Type scale (v2.6: bumped +20% across the board for shop-floor readability) ── */ --fs-xs: 14px; /* was 12 */ --fs-sm: 16px; /* was 13 */ --fs-md: 17px; /* was 14 */ --fs-lg: 19px; /* was 16 */ --fs-xl: 22px; /* was 18 */ --fs-2xl: 26px; /* was 22 */ --fs-3xl: 34px; /* was 28 */ --fs-hero: 53px; /* was 44 */ --lh-tight: 1.2; --lh-base: 1.5; --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-num: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* ── Spacing ───────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; /* ── Density (compact mode pulls from these) ───── */ --pad-card: 20px; --pad-input: 12px; --gap-grid: 16px; --topbar-h: 56px; /* ── Motion ────────────────────────────────────── */ --ease-out: cubic-bezier(.22,.61,.36,1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; } /* ── Compact density (also +20% from previous values) ─── */ [data-density="compact"] { --pad-card: 14px; --pad-input: 9px; --gap-grid: 10px; --fs-md: 16px; /* was 13 */ --fs-lg: 17px; /* was 14 */ --fs-xl: 19px; /* was 16 */ --fs-2xl: 22px; /* was 18 */ --fs-3xl: 26px; /* was 22 */ } /* ── Dark theme ──────────────────────────────────── */ [data-theme="dark"], body.dark-mode { /* legacy alias used by inline JS in advanced_ui */ --ink: #E6EEF7; --ink-2: #D4DFEC; --muted: #94A8BC; --muted-2: #6B829A; --line: #233448; --line-soft: #1B2A3C; --surface: #172231; --surface-alt: #0F1923; --surface-tint:#1E2D3F; --overlay: rgba(0, 0, 0, .6); --ok: #4ADE80; --ok-bg: #0D2B1A; --ok-line: #1F5234; --warn: #FACC15; --warn-bg: #2A2500; --warn-line: #5C5208; --bad: #FF6B6B; --bad-bg: #2A0A0A; --bad-line: #5C1818; --info: #38BDF8; --info-bg: #0E2233; --info-line: #1E4566; --volvo-navy: #0A1520; /* topbar background gets darker */ --volvo-navy-deep: #050C14; --volvo-blue: #38BDF8; /* accent lifts in dark */ --volvo-blue-soft: #0E2233; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 12px rgba(0,0,0,.45); --shadow-pop: 0 12px 32px rgba(0,0,0,.6); } /* ── Reset / base ────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: light dark; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-base); color: var(--ink); background: var(--surface-alt); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } /* numbers — engineering tables, KPI tiles */ .num, .kpi__value, .verdict__metric { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* focus visibility — never strip outlines silently */ :where(button, a, input, select, textarea):focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--volvo-blue); } /* selection */ ::selection { background: var(--volvo-blue); color: #fff; } /* scrollbar — subtle, theme-aware */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--surface-alt); } ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }