/* VantageGrid design tokens (WOW.md §2, POLISH.md §2): the one place for colour, type, spacing, radii, elevation, borders, gradients and motion on the public pages and the product figures they show. The fonts are Geist and Geist Mono (SIL OFL 1.1, static/fonts/geist/), declared with versioned URLs in templates/partials/site_fonts.html. Colour has one meaning each (POLISH.md §2): the accent is actions and selection; loss is every negative money figure, every rule break and the gap between the lines; gain is positive money, the on-plan line and trades that kept the rules; data is the as-traded line and counts; everything else is neutral. */ :root { /* Type: one family, figures in its tabular digits; the mono face for small data labels. */ --ds-font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ds-text-2xs: .6875rem; --ds-text-xs: .75rem; --ds-text-sm: .875rem; --ds-text-base: 1rem; --ds-text-md: 1.0625rem; --ds-text-lg: 1.25rem; --ds-text-xl: 1.5rem; --ds-text-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); --ds-text-3xl: clamp(1.875rem, 1.35rem + 2vw, 2.75rem); --ds-text-display: clamp(2.25rem, 1.45rem + 3vw, 3.75rem); /* Figures: five deliberate steps. */ --ds-figure-xs: .9375rem; --ds-figure-sm: 1.125rem; --ds-figure-md: clamp(1.5rem, 1.25rem + .9vw, 1.875rem); --ds-figure-lg: clamp(2.25rem, 1.7rem + 2vw, 3rem); --ds-figure-xl: clamp(2.75rem, 2rem + 3vw, 4.25rem); --ds-leading-display: 1.04; --ds-leading-tight: 1.14; --ds-leading-snug: 1.3; --ds-leading-body: 1.6; --ds-tracking-display: -.038em; --ds-tracking-tight: -.022em; --ds-tracking-figure: -.025em; --ds-tracking-caps: .08em; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 680; --ds-weight-heavy: 720; /* Neutrals for light surfaces. */ --ds-white: #ffffff; --ds-gray-25: #fbfcfe; --ds-gray-50: #f6f8fb; --ds-gray-100: #eef2f7; --ds-gray-200: #e3e8ef; --ds-gray-300: #cdd5e0; --ds-gray-400: #98a4b6; --ds-gray-500: #66738a; --ds-gray-600: #4a5568; --ds-gray-700: #334155; --ds-gray-800: #1e2738; --ds-gray-900: #0e1525; /* Ink: the dark surfaces. Bands are the deepest; a card on a band is lighter, with a top light. */ --ds-ink-1000: #03050b; --ds-ink-950: #060912; --ds-ink-900: #0b1120; --ds-ink-850: #0f1628; --ds-ink-800: #141d33; --ds-ink-700: #1d2843; --ds-ink-line: rgba(148, 163, 184, .12); --ds-ink-line-strong: rgba(148, 163, 184, .22); --ds-ink-text: #f2f5f9; --ds-ink-text-2: #c3cddb; --ds-ink-text-3: #93a0b5; /* Primitives behind the accent. */ --ds-blue-50: #eef4ff; --ds-blue-100: #dbe6fe; --ds-blue-300: #93b6fd; --ds-blue-400: #7aa7ff; --ds-blue-500: #3d7ef5; --ds-blue-600: #2563eb; --ds-blue-700: #1d4fd8; --ds-blue-800: #1e3fae; /* Semantic colour (POLISH.md §2). Contrast on ink-900 / white, measured. */ --ds-accent: var(--ds-blue-600); /* fills; white text 5.2:1 */ --ds-accent-hover: var(--ds-blue-700); --ds-accent-on-ink: var(--ds-blue-400); /* text and selected states on ink, 7.9:1 */ --ds-accent-soft: rgba(61, 126, 245, .14); --ds-loss: #e5484d; /* markers, fills, bars (graphics, 3.9:1 / 4.8:1) */ --ds-loss-text: #c52a30; /* text on light, 5.6:1 */ --ds-loss-on-ink: #ff7a7f; /* text on ink, 7.5:1 */ --ds-loss-soft: #fff1f1; --ds-gain: #10b981; --ds-gain-line: #0d9468; /* the on-plan line on light */ --ds-gain-text: #047857; /* text on light, 5.5:1 */ --ds-gain-on-ink: #3fd6a0; /* text and line on ink, 10.2:1 */ --ds-gain-soft: #ecfdf5; --ds-data: #64748b; /* the as-traded line, counts; 4.8:1 */ --ds-data-on-ink: #a3b1c6; /* 8.7:1 */ /* Spacing: a 4 px grid. */ --ds-space-1: .25rem; --ds-space-2: .5rem; --ds-space-3: .75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-8: 2rem; --ds-space-10: 2.5rem; --ds-space-12: 3rem; --ds-space-16: 4rem; --ds-space-20: 5rem; --ds-space-24: 6rem; --ds-section: clamp(4rem, 2.5rem + 6vw, 7rem); --ds-shell: min(1200px, calc(100% - 2.5rem)); --ds-header: 64px; /* Radii. */ --ds-radius-xs: 6px; --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 20px; --ds-radius-2xl: 24px; --ds-radius-pill: 999px; /* Borders. */ --ds-border: 1px solid var(--ds-gray-200); --ds-border-strong: 1px solid var(--ds-gray-300); --ds-border-ink: 1px solid var(--ds-ink-line); --ds-border-ink-strong: 1px solid var(--ds-ink-line-strong); /* Elevation: layered shadows, a contact shadow under an ambient one. */ --ds-shadow-xs: 0 1px 2px rgba(14, 21, 37, .06); --ds-shadow-sm: 0 1px 2px rgba(14, 21, 37, .06), 0 2px 6px -1px rgba(14, 21, 37, .06); --ds-shadow-md: 0 1px 2px rgba(14, 21, 37, .05), 0 4px 10px -2px rgba(14, 21, 37, .06), 0 14px 30px -10px rgba(14, 21, 37, .14); --ds-shadow-lg: 0 1px 2px rgba(14, 21, 37, .05), 0 8px 16px -6px rgba(14, 21, 37, .08), 0 30px 60px -18px rgba(14, 21, 37, .22); /* A card on ink: a hairline, a top light, a contact shadow and a long soft one. */ --ds-shadow-ink: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(148, 163, 184, .13), 0 1px 1px rgba(0, 0, 0, .45), 0 12px 24px -10px rgba(0, 0, 0, .55), 0 40px 80px -24px rgba(0, 0, 0, .65); --ds-shadow-ink-sm: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(148, 163, 184, .11), 0 6px 14px -8px rgba(0, 0, 0, .5); --ds-shadow-button: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(10, 37, 120, .3), 0 6px 16px -6px rgba(37, 99, 235, .65); --ds-ring: 0 0 0 3px rgba(61, 126, 245, .5); --ds-ring-offset: 0 0 0 2px var(--ds-white), 0 0 0 5px rgba(61, 126, 245, .6); --ds-ring-ink: 0 0 0 2px var(--ds-ink-950), 0 0 0 5px rgba(122, 167, 255, .75); /* Surfaces on ink. */ --ds-surface-ink: linear-gradient(180deg, #121b30 0%, #0d1426 42%, #0b1120 100%); --ds-surface-ink-2: rgba(148, 163, 184, .055); /* Gradients. The noise is a faint grain laid over large ink fields so they never band. */ --ds-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --ds-grad-ink: radial-gradient(60% 70% at 78% 18%, rgba(45, 105, 235, .2) 0%, rgba(45, 105, 235, 0) 70%), radial-gradient(40% 50% at 8% 100%, rgba(63, 214, 160, .05) 0%, rgba(63, 214, 160, 0) 70%), linear-gradient(180deg, #070b16 0%, var(--ds-ink-1000) 100%); --ds-band-ink: var(--ds-noise), var(--ds-grad-ink); /* A hairline grid that fades out from its centre, behind a product visual. */ --ds-grid-ink: linear-gradient(rgba(148, 163, 184, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px); --ds-grid-light: linear-gradient(rgba(14, 21, 37, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 21, 37, .05) 1px, transparent 1px); --ds-grad-panel-ink: var(--ds-surface-ink); --ds-grad-soft: linear-gradient(180deg, var(--ds-gray-50) 0%, var(--ds-white) 100%); --ds-grad-hairline: linear-gradient(90deg, rgba(148, 163, 184, 0) 0%, rgba(148, 163, 184, .35) 50%, rgba(148, 163, 184, 0) 100%); /* Motion: one step is never longer than a second (PLAN rule). */ --ds-ease-out: cubic-bezier(.16, 1, .3, 1); --ds-ease-in-out: cubic-bezier(.65, 0, .35, 1); --ds-dur-fast: 120ms; --ds-dur-base: 200ms; --ds-dur-slow: 360ms; --ds-dur-draw: 900ms; } @media (prefers-reduced-motion: reduce) { :root { --ds-dur-fast: 0ms; --ds-dur-base: 0ms; --ds-dur-slow: 0ms; --ds-dur-draw: 0ms; } }