/* ============================================================ SORYVEX — design tokens Font faces + the single :root token source. Split out of style.css so a page that needs the design system but not the whole component library (the live scan console, the printable report) can consume tokens alone. ============================================================ */ /* ---------- Fonts (§2.2) ---------- */ @font-face { font-family: "Inter"; src: url("/static/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/static/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/static/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/static/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jbmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jbmono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* Surfaces */ --bg: #09090b; --bg-subtle: #0c0c0f; --surface: #111113; --surface-raised: #18181b; /* Second surface level: interactive hover fills, one step above --surface-raised. */ --surface-2: #1f1f23; /* Borders */ --border: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.10); --border-focus: var(--accent); /* Text */ --text: #fafafa; --text-secondary: #a1a1aa; --text-tertiary: #89899a; /* Brand accent */ --accent: #38bdf8; --accent-hover: #7dd3fc; --accent-muted: rgba(56,189,248,0.12); --accent-ink: #041016; /* Brand accent as RGB channels. Every tint and glow in the product is "the accent at some opacity". Spelling each one out as a literal rgba(56,189,248,…) is why the light theme could not re-point them: --accent became #1b6ea7 in the light palette, but thirty declarations kept the dark theme's blue, so a light page still carried dark-theme glows and one light-blue halo on near-white. Declaring the channels once and deriving every tint from them means a theme flip is one line here and nothing in the sheet can be left behind. */ --accent-rgb: 56 189 248; /* The neutral overlay, the same way: white on the dark theme, ink on the light one. It is what hover fills, hairline borders and inset highlights are made of — a "just off the surface" wash, which has to invert with the surface or it disappears. */ --neutral-rgb: 255 255 255; /* A deeper brand blue, for the gradient ends where --accent is too light to carry a shape on its own. */ --accent-deep: #2563eb; --accent-deep-rgb: 37 99 235; /* Semantic state (generic UI only) */ --success: #22c55e; --success-muted: rgba(34,197,94,0.12); --success-text: #86efac; --warning: #eab308; --warning-muted: rgba(234,179,8,0.12); --warning-text: #fde047; --danger: #ef4444; --danger-muted: rgba(239,68,68,0.12); /* Filled danger surface that carries white text (count badges). --danger is tuned to be legible as *text* on the dark surface, where white on it is only 3.76:1; a badge needs the darker step to clear 4.5:1. */ --danger-solid: #dc2626; --danger-text: #fca5a5; --info: var(--accent); --info-muted: var(--accent-muted); --info-text: #bae6fd; /* Password-strength meter: the "Good" tier needs a colour between the amber warning and green success, so it gets a token of its own. */ --strength-good: #84cc16; /* Ink for text set ON a saturated fill. `--accent-ink` covers the brand surface; these cover the other three, so a filled status button or a count badge is `color: var(--x-ink)` rather than a hand-picked near-black that drifts a shade every time a state colour is re-tuned. The dark theme's warning and success are light enough that near-white on them fails, which is why these are ink and not white; the light theme's are darker still (see the light block), so there they flip to white. */ --success-ink: #04140a; --warning-ink: #1a1200; --danger-ink: #ffffff; /* Severity — findings/report context ONLY */ --sev-critical: #f87171; --sev-critical-bg: rgba(248,113,113,0.12); --sev-high: #fb923c; --sev-high-bg: rgba(251,146,60,0.12); --sev-medium: #fbbf24; --sev-medium-bg: rgba(251,191,36,0.12); --sev-low: #60a5fa; --sev-low-bg: rgba(96,165,250,0.12); --sev-info: #94a3b8; --sev-info-bg: rgba(148,163,184,0.12); /* Type (§2.2) Inter covers Latin, Cyrillic and Greek. It does not cover Hebrew, Arabic, Devanagari or CJK, and every one of those reaches this product: staff names, customer names, and ticket subjects are all user-supplied text. With no script coverage the browser fell through to whatever the OS had — on a bare Linux image, DejaVu — which has 400 and 700 only. A 600 heading therefore rendered as *synthetic* bold, a doubled outline around every glyph, and the negative letter-spacing on top of that pulled the letters into each other. It read as a broken font, not as a fallback. The script families are listed before the generic `sans-serif` so a platform with a real UI face for that script uses it — with its real 500/600 weights — and only a platform with nothing falls through to the generic family, which is a far better outcome than synthetic bolding. Inter is still first, so no existing Latin text changes. */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans", "Arial Hebrew", "Geeza Pro", "Arial Unicode MS", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Malgun Gothic", sans-serif; --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* Spacing (§2.3) — one 8px-based scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radius (§2.4) */ --radius-sm: 6px; --radius-md: 12px; --radius-full: 999px; /* Shadow / elevation (§2.5) — floating elements only */ --shadow-sm: 0 4px 12px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 24px 48px rgba(0,0,0,0.5); --shadow-focus: 0 0 0 3px var(--accent-muted); /* Z-index (§2.7) */ /* Motion — a three-step duration scale plus one easing, so every transition in the product comes from the same set. The stylesheet previously mixed ten different durations (.12s/.15s/.16s/.18s/.2s/.25s/.5s/.55s) and two notations for the same value. */ --speed: 0.12s; /* hover, colour, border, opacity */ --speed-md: 0.2s; /* larger movement: slide, expand, drawer */ --speed-lg: 0.32s; /* reveals, modals, toasts */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* One deliberate exception to the three-step scale: the scroll reveal. It is the only motion on the site that starts on its own rather than on a user action, so it needs long enough to read as an entrance and a springier curve than an interaction should have. */ --speed-reveal: 0.55s; --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); /* Bar fills (plan usage, progress). Slower than --speed-md so the change is legible as a change, not as a flicker. */ --speed-slow: 0.5s; --z-sticky: 90; --z-mobile-nav: 99; --z-dropdown: 100; --z-modal-backdrop: 1000; --z-modal: 1001; --z-toast: 2000; --maxw: 1120px; /* A few steps in the scales below are not referenced yet (--shadow-sm, --space-24, --z-dropdown, --info). They are kept deliberately: removing an interior step from an elevation / spacing / z-index scale leaves a gap that is worse than an unused rung, and --info completes the success/warning/danger/info set. Everything else here is in active use. */ /* Native UI (scrollbars, form controls, caret) follows the active theme. Declared here rather than as a so the agent hub's light theme can flip it — a fixed meta tag would leave dark scrollbars on a light page. */ color-scheme: dark; }