/* Legal.io design system — tokens. Warm paper background, cobalt accent, Lay Grotesk display + Inter body. */ @font-face { font-family: "Lay Grotesk"; src: url("/assets/lay-grotesk-legalio-medium-7d2b0c0c.otf") format("opentype"), url("/assets/lay-grotesk-legalio-medium-77d674f3.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/inter-latin-496a588b.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/inter-latin-ext-5a6754fc.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Both schemes are supported everywhere; light-dark() below resolves against this. `data-theme` on pins one scheme if we ever ship a toggle. */ color-scheme: light dark; /* Brand — fixed in both schemes. Used by surfaces that are intentionally dark regardless of the user's scheme (the card, the hero stage). */ --navy: #050911; --light-blue: #85A9E3; --periwinkle: #A8B8F0; /* Warm beige neutrals (paper) */ --beige-0: #FAF9F7; --beige-1: #F4F2EE; --beige-2: #EBE8E2; --beige-3: #DDD8CF; --beige-4: #C9C3B8; --beige-5: #B6B0A6; /* Gray ramp */ --gray-0: #F5F6F5; --gray-1: #E4E6E4; --gray-2: #C9CCC9; --gray-3: #A8ACA8; --gray-4: #878B87; --gray-5: #666A66; --gray-6: #474A47; --gray-7: #2C2E2C; --gray-8: #161816; --gray-9: #080908; /* ---- Semantic surfaces: light() / dark() ---- paper = page background paper-2 = recessed strip on the page surface = raised panel surface-2/3 = inputs, fills, hover states */ --paper: light-dark(#FAF9F7, #080A0F); --paper-2: light-dark(#F4F2EE, #0D1016); --surface: light-dark(#FFFFFF, #12151D); --surface-2: light-dark(#F4F2EE, #1A1E28); --surface-3: light-dark(#EBE8E2, #232834); --ink: light-dark(#050911, #ECEEF3); --ink-muted: light-dark(#4A4E58, #A2A9B8); --ink-faint: light-dark(#8A8E98, #6E7686); --hairline: light-dark(rgba(5, 9, 17, 0.10), rgba(255, 255, 255, 0.09)); --hairline-strong: light-dark(rgba(5, 9, 17, 0.20), rgba(255, 255, 255, 0.18)); /* Accent. --cobalt is the accent *on* the page (links, icons, thin rules) and is lightened in dark mode for contrast. --cobalt-solid is the accent *as* a fill, which always carries white text, so it stays deep in both schemes. */ --cobalt: light-dark(#0025DE, #8CA4FF); --cobalt-hover: light-dark(#001FB8, #B4C3FF); --cobalt-solid: light-dark(#0025DE, #2B4BF0); --cobalt-solid-hover: light-dark(#001FB8, #3D5CFF); --cobalt-ghost: light-dark(rgba(0, 37, 222, 0.07), rgba(140, 164, 255, 0.13)); --focus-ring: light-dark(rgba(0, 37, 222, 0.30), rgba(140, 164, 255, 0.38)); /* Status */ --success: light-dark(#148F3E, #3DD68C); --success-soft: light-dark(#E8F5EC, rgba(61, 214, 140, 0.14)); --success-ink: light-dark(#14591F, #7DEBB6); --danger: light-dark(#B42318, #FF8A80); --danger-soft: light-dark(#FCEFEF, rgba(255, 138, 128, 0.12)); --danger-ink: light-dark(#8C1D1D, #FFB4AE); --warning: light-dark(#D97706, #F5A742); /* Type */ --font-display: "Lay Grotesk", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Spacing — 8pt scale */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --container: 1240px; --gutter: 24px; --radius-card: 16px; --radius-pill: 999px; --radius-modal: 20px; --nav-h: 64px; /* Shadows — soft and cool in light, deep and near-black in dark, where a tinted shadow reads as haze rather than lift. */ --shadow-sm: 0 1px 2px light-dark(rgba(5, 9, 17, 0.05), rgba(0, 0, 0, 0.40)), 0 1px 4px light-dark(rgba(5, 9, 17, 0.04), rgba(0, 0, 0, 0.28)); --shadow-md: 0 6px 20px light-dark(rgba(5, 9, 17, 0.08), rgba(0, 0, 0, 0.48)), 0 2px 6px light-dark(rgba(5, 9, 17, 0.05), rgba(0, 0, 0, 0.32)); --shadow-lg: 0 24px 60px light-dark(rgba(5, 9, 17, 0.14), rgba(0, 0, 0, 0.62)), 0 8px 24px light-dark(rgba(5, 9, 17, 0.08), rgba(0, 0, 0, 0.40)); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 120ms; --t-med: 200ms; --t-slow: 360ms; } /* Manual override hooks — set data-theme on to pin a scheme. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (max-width: 600px) { :root { --gutter: 16px; } }