/* ============================================================================ * Overskull Design System — TOKEN LAYER * ---------------------------------------------------------------------------- * This is the ONLY file in an app where raw literals are allowed. * Every other rule must consume var(--…). * * Derived from the SSOMA Frappe app (2026-08) and normalized: * - 3 competing navies -> 1 brand ramp * - ~50 grays across 5 ramps -> 1 neutral ramp (12 steps) * - 37 semantic reds/greens/ambers -> 4 semantic pairs * - 34 shadows -> 4 * - 12 ad-hoc z-indexes (incl. 2147483000) -> 6 named layers * - 4 card radii / 4 input radii -> 4 named radii * * Contrast ratios noted below were computed against #FFFFFF (or the stated * surface) using the WCAG 2.1 relative-luminance formula. * ========================================================================= */ :root { /* --------------------------------------------------------------------- * BRAND — navy. Identity, primary CTA, page/app headers, sidebar. * ------------------------------------------------------------------ */ --c-brand-900: #08183A; /* pressed CTA */ --c-brand-800: #0B1F4A; /* PRIMARY. 16.0:1 on white. Sidebar + CTA fill */ --c-brand-700: #162E4E; /* header bars, section chrome */ --c-brand-600: #26426B; /* hover on brand surfaces */ --c-brand-100: #DDE4F0; /* brand tint surface */ --c-brand-50: #EEF2F9; /* brand tint, lightest */ /* --------------------------------------------------------------------- * ACCENT — teal. Links, selection, active nav, pills, progress fill. * Never used as a second "primary": CTA stays navy. * ------------------------------------------------------------------ */ --c-accent-800: #14606B; /* accent text on light tint. 4.9:1 on --c-accent-50 */ --c-accent-600: #1A7F8E; /* ACCENT. 4.70:1 on white — AA for >=14px normal */ --c-accent-500: #2A97A7; /* hover */ --c-accent-200: #B2DDE3; /* pill / chip border */ --c-accent-50: #E8F6F8; /* pill / chip surface */ /* --------------------------------------------------------------------- * NEUTRAL — the single gray ramp. Text, borders, surfaces. * ------------------------------------------------------------------ */ --c-neutral-0: #FFFFFF; /* card surface */ --c-neutral-25: #F8FAFC; /* subtle zebra / hover row */ --c-neutral-50: #F4F7FA; /* app background */ --c-neutral-100: #EDF1F6; /* table head, inset panel */ --c-neutral-200: #D9E2EC; /* DEFAULT BORDER */ --c-neutral-300: #C3CFDD; /* input border on hover, dividers on tint */ --c-neutral-400: #9AABBC; /* disabled text, placeholders. Decorative only */ --c-neutral-500: #6B7A99; /* 4.32:1 — NOT AA for <18px. Large/bold only */ --c-neutral-600: #5A6A8A; /* MUTED TEXT. 5.43:1 on white — AA everywhere */ --c-neutral-700: #3A4763; /* secondary text, table headers */ --c-neutral-800: #22314F; /* strong text */ --c-neutral-900: #1A2B4A; /* BODY TEXT. 13.5:1 on white */ /* --------------------------------------------------------------------- * SEMANTIC — 4 pairs. `-fg` on `-bg` is >=4.5:1 (computed). * Use `-solid` only for filled buttons with white text. * ------------------------------------------------------------------ */ --c-success-fg: #166534; /* 4.88:1 on --c-success-bg */ --c-success-bg: #EDF9F1; --c-success-br: #A7DDB8; --c-success-solid: #15803D; /* white text = 5.02:1 */ --c-warning-fg: #92400E; /* 4.94:1 on --c-warning-bg */ --c-warning-bg: #FEF6E7; --c-warning-br: #FCD9A0; --c-warning-solid: #B45309; /* white text = 5.06:1 */ --c-danger-fg: #991B1B; /* 7.64:1 on --c-danger-bg */ --c-danger-bg: #FEF2F2; --c-danger-br: #F5B5B5; --c-danger-solid: #B91C1C; /* white text = 6.54:1 */ --c-info-fg: #14606B; /* 4.85:1 on --c-info-bg */ --c-info-bg: #E8F6F8; --c-info-br: #B2DDE3; --c-info-solid: #1A7F8E; /* white text = 4.70:1 — use >=14px semibold */ --c-idle-fg: #3A4763; /* 8.15:1 on --c-idle-bg. Draft / neutral state */ --c-idle-bg: #EDF1F6; --c-idle-br: #D9E2EC; /* --------------------------------------------------------------------- * SEMANTIC ALIASES — prefer these in component rules. * ------------------------------------------------------------------ */ --c-text: var(--c-neutral-900); --c-text-muted: var(--c-neutral-600); --c-text-subtle: var(--c-neutral-700); --c-text-disabled: var(--c-neutral-400); --c-text-on-dark: #FFFFFF; --c-link: var(--c-accent-600); --c-link-hover: var(--c-accent-800); --c-bg-app: var(--c-neutral-50); --c-bg-surface: var(--c-neutral-0); --c-bg-inset: var(--c-neutral-100); --c-bg-hover: var(--c-neutral-25); --c-bg-selected: var(--c-accent-50); --c-bg-overlay: rgba(8, 24, 58, 0.55); --c-border: var(--c-neutral-200); --c-border-strong: var(--c-neutral-300); --c-border-focus: var(--c-accent-600); /* --------------------------------------------------------------------- * TYPOGRAPHY * Inter is Frappe's shipped face; the stack degrades to system UI. * Scale is 8 steps. Nothing below --fs-micro. --fs-micro is uppercase only. * ------------------------------------------------------------------ */ --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; --fs-micro: 11px; /* uppercase micro-label ONLY, with --ls-wide */ --fs-caption: 12px; /* metadata, table cells in dense tables */ --fs-sm: 13px; /* secondary text, badges */ --fs-body: 14px; /* DEFAULT body + all form controls */ --fs-lead: 16px; /* card titles, lead paragraph */ --fs-h3: 18px; /* section title */ --fs-h2: 20px; /* page section heading */ --fs-h1: 24px; /* page title */ --fs-display: 28px; /* KPI value only */ --fw-regular: 400; --fw-medium: 500; /* labels, table headers */ --fw-semibold: 600; /* titles, buttons, badges */ --fw-bold: 700; /* KPI values only */ --lh-tight: 1.25; /* headings, KPI values */ --lh-snug: 1.4; /* titles, single-line controls */ --lh-normal: 1.5; /* body copy, form controls */ --lh-loose: 1.65; /* long-form docs / manual pages */ --ls-tight: -0.01em; /* --fs-h1 and above */ --ls-wide: 0.06em; /* --fs-micro uppercase labels */ /* --------------------------------------------------------------------- * SPACING — 4px base. Use ONLY these steps. * ------------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; /* default gap between related elements */ --sp-4: 16px; /* default card padding / grid gap */ --sp-5: 20px; --sp-6: 24px; /* section separation */ --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* --------------------------------------------------------------------- * SIZING — control heights. 44px is the WCAG 2.5.5 floor for anything * clickable/tappable, desktop included. * ------------------------------------------------------------------ */ --size-tap: 44px; /* MINIMUM for any interactive target */ --size-control: 40px; /* non-interactive-height inputs, desktop */ --size-control-sm: 32px; /* dense toolbar controls; NOT clickable-only */ --size-icon-sm: 16px; --size-icon: 18px; --size-icon-lg: 24px; --size-avatar: 32px; /* --------------------------------------------------------------------- * RADII — 4 values, no more. * ------------------------------------------------------------------ */ --r-sm: 6px; /* inputs, buttons, chips, small controls */ --r-md: 10px; /* cards, panels, table wrappers */ --r-lg: 16px; /* modals, hero surfaces, bottom sheets */ --r-full: 9999px; /* pills, avatars, progress tracks */ --r-none: 0; /* edge-to-edge application surfaces */ /* --------------------------------------------------------------------- * ELEVATION — 4 shadows. Never invent a fifth. * ------------------------------------------------------------------ */ --sh-sm: 0 1px 2px rgba(16, 32, 64, 0.06); --sh-md: 0 2px 8px rgba(16, 32, 64, 0.08); --sh-lg: 0 8px 24px rgba(16, 32, 64, 0.12); --sh-focus: 0 0 0 3px rgba(26, 127, 142, 0.32); /* --------------------------------------------------------------------- * FOCUS — one ring, everywhere. Never `outline: none` without a * replacement of equal or greater visibility. * ------------------------------------------------------------------ */ --focus-width: 2px; --focus-offset: 2px; --focus-color: var(--c-accent-600); /* --------------------------------------------------------------------- * Z-INDEX — named layers. Never write a bare number. * ------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; /* sticky table head, sticky action bar */ --z-dropdown: 500; /* typeahead, menus, popovers */ --z-overlay: 1000; /* modal backdrop, lightbox scrim */ --z-modal: 1010; --z-toast: 1020; --z-tooltip: 1030; /* --------------------------------------------------------------------- * MOTION — one duration set. Always guard with prefers-reduced-motion. * ------------------------------------------------------------------ */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* --------------------------------------------------------------------- * LAYOUT * ------------------------------------------------------------------ */ --layout-max: 1440px; --layout-gutter: var(--sp-4); --layout-reading: 72ch; /* long-form text column cap */ } /* ============================================================================ * BREAKPOINTS — documentation, not code (CSS custom properties cannot be used * in @media). ONE mobile boundary at 640px. Copy these queries verbatim. * * @media (max-width: 480px) ... xs — single column, labels may wrap * @media (max-width: 640px) ... MOBILE — the canonical boundary * @media (min-width: 641px) ... desktop-up * @media (min-width: 901px) ... md — 3-up grids * @media (min-width: 1201px) ... lg — 4-up grids, side panels * * Never use 639px or write both `max-width: 640px` and `min-width: 640px`: * at exactly 640px both match and two layouts apply simultaneously. * ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }