/* StimPlan v9 · Design Tokens * Light mode. Engineering-serious. NSI brand-aware. */ :root { /* Surfaces: clean off-white canvas overlaid with the NSI topographic pattern. * Three-tier hierarchy: dark navy rail and hero card, lightly textured canvas, pure white cards. * Cards stay #FFFFFF so the topographic texture reads through canvas only, not under content. */ --canvas: #F7F7F4; /* clean warm-leaning off-white */ --canvas-strong: #EFEEE8; /* slightly deeper for emphasis */ --panel: #FFFFFF; --panel-elev: #FFFFFF; --panel-muted: #F4F4F0; /* tinted muted panel */ --panel-warm: #F8F1DD; /* sand-tinted panel for emphasis blocks */ --border: #DDDDD6; /* visible against canvas and white panels */ --border-strong: #B8B8AE; --divider: #ECECE6; /* Brand */ --primary: #0F2A4A; /* Petroleum navy · rail, headers, body links */ --primary-strong: #082040; --primary-soft: #1B3A60; --accent: #0F7A4D; /* NSI green refined · active states, CTAs */ --accent-soft: #E8F5EE; /* tinted backgrounds */ --accent-strong: #0B5E3A; /* Chase Sapphire Reserve inspired premium palette. * Deep, refined, heritage tones · sampled from the actual SR card. */ --champagne: #C9B595; /* metallic foil sheen · the Chase card right-side gradient */ --champagne-light: #E0D1B0; /* lighter champagne for highlight tips */ --champagne-soft: #F5EFE2; /* near-cream tint for backgrounds */ --bronze: #9B6B3F; /* deeper bronze · chart use, distinct from champagne */ --bronze-soft: #F4ECDF; --bronze-strong: #7A5230; --burgundy: #8C2A3F; /* deep wine · Chase signature accent, charts, premium badges */ --burgundy-soft: #F6E8EC; --burgundy-strong: #6B1F30; --forest: #1F4D3A; /* deeper forest, secondary to NSI green */ --forest-soft: #E2EAE5; --forest-strong: #143427; --teal-deep: #1F5F66; /* deep teal · sophisticated cool, charts */ --teal-deep-soft: #E0EAEC; --teal-deep-strong: #163E43; /* Semantic */ --success: #10B981; --success-soft: #ECFDF5; --warning: #F97316; --warning-soft: #FFF7ED; --danger: #EF4444; --danger-soft: #FEF2F2; --info: #0EA5E9; --info-soft: #ECFEFF; /* Chart palette · luminance-separated, distinguishable on multi-line plots. * 5 colors max. Forest dropped (merged with NSI green). Each color sits at a * distinct luminance band so 4 runs stay readable at 1-2px stroke weight. * NSI green is reserved for ACTIVE/LIVE state, NOT a routine chart series. */ --chart-1: #0F2A4A; /* Navy (L≈18) · Run #1 / baseline */ --chart-2: #8C2A3F; /* Burgundy (L≈30) · Run #2 / mid-dark warm */ --chart-3: #1F5F66; /* Deep Teal (L≈35) · Run #3 / mid-dark cool */ --chart-4: #C26B3E; /* Terracotta (L≈55) · Run #4 / mid-light warm · brighter than bronze */ --chart-5: #0F7A4D; /* NSI Green (L≈42) · ACTIVE / live / latest */ --chart-6: #C9B595; /* Champagne (L≈74) · highlight or annotation only */ /* Soft variants for filled areas under chart lines */ --chart-1-soft: rgba(15, 42, 74, 0.16); --chart-2-soft: rgba(140, 42, 63, 0.16); --chart-3-soft: rgba(31, 95, 102, 0.16); --chart-4-soft: rgba(194, 107, 62, 0.18); --chart-5-soft: rgba(15, 122, 77, 0.18); /* Text */ --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #64748B; --text-on-primary: #FFFFFF; --text-on-accent: #FFFFFF; /* Type */ --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Text scale multiplier · switched via [data-text-size] on . * Small 0.92 · Normal 1.00 · Larger 1.12 · Largest 1.24 * Spacing tokens intentionally do NOT scale; only typography. */ --ts: 1; --fs-12: calc(0.75rem * var(--ts)); --fs-13: calc(0.8125rem * var(--ts)); --fs-14: calc(0.875rem * var(--ts)); --fs-15: calc(0.9375rem * var(--ts)); --fs-16: calc(1rem * var(--ts)); --fs-18: calc(1.125rem * var(--ts)); --fs-20: calc(1.25rem * var(--ts)); --fs-24: calc(1.5rem * var(--ts)); --fs-30: calc(1.875rem * var(--ts)); --fs-36: calc(2.25rem * var(--ts)); --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Spacing · 4pt scale */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px; /* Shadows · subtle for light mode */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02); --shadow-2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03); --shadow-3: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-panel: 0 -1px 0 rgba(15, 23, 42, 0.04), 0 8px 28px rgba(15, 23, 42, 0.10); /* Layout */ --rail-w: 260px; --rail-w-collapsed: 64px; --topbar-h: 56px; --copilot-w: 420px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* Text size variants · applied via data-text-size on */ :root[data-text-size="small"] { --ts: 0.92; } :root[data-text-size="normal"] { --ts: 1.00; } :root[data-text-size="large"] { --ts: 1.12; } :root[data-text-size="largest"] { --ts: 1.24; } /* Topographic background pattern. Subtle on light canvas; full opacity on dark navy hero. * The pattern is the same NSI proposal artwork (assets/topo-pattern.jpg, deep navy with contour lines). * On the light canvas we layer it under a near-opaque cream wash so only faint contour lines show through. */ /* Base reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--text-primary); background-color: var(--canvas); background-image: /* Cream wash dropped to 0.62 so the topographic contours read clearly on the canvas */ linear-gradient(rgba(247, 247, 244, 0.62), rgba(247, 247, 244, 0.62)), url('topo-pattern.jpg'); background-size: auto, 1400px auto; background-attachment: fixed, fixed; background-repeat: no-repeat, repeat; background-position: center center, center center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Reusable topographic-on-navy treatment for hero/dark surfaces */ .texture-topo-navy { background-image: linear-gradient(135deg, rgba(15,42,74,0.78) 0%, rgba(26,45,94,0.65) 100%), url('topo-pattern.jpg'); background-size: auto, 1200px auto; background-position: center center, center center; background-blend-mode: normal, normal; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } /* Mono utility for data values */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; } .tnum { font-variant-numeric: tabular-nums; }