/* * design-v2/tokens.css – Pure Stone design tokens for the Atlas Brief redesign. * Loaded only when mm_design_v2_is_enabled() is true. Token set is verbatim * from Prompts/Design v2/07-atlas-brief-pure-stone.html (the source of truth). * * Nothing in this file applies until an element carries [data-design-v2] on * or . The attribute is the kill switch. */ :root { /* Pure Stone neutrals – replaces warm bone-beige */ --paper: oklch(97% 0 0); --paper-soft: oklch(99% 0 0); --paper-shade: oklch(93.5% 0 0); --paper-deep: oklch(91% 0 0); /* Navy ramp + brand */ --navy-50: #E6EAF3; --navy-100: #B8C3DC; --navy-300: #5E7196; --navy-500: #2E4570; --navy-soft: #25395F; --navy: #0E1F3B; --navy-deep: #050C1C; /* Orange + Atlas (AI) accents */ --orange: #FF6810; --orange-deep: #C44600; --orange-soft: #FFAA66; --orange-paper: #FFE3CC; --atlas: #0DBE6E; --atlas-paper: #DDF5E7; --atlas-deep: #057A4A; /* ===== Status Spectrum (blue → orange) — replaces green/amber/red pace ===== Canonical semantic names + back-compat aliases. Sandstone TEXT is tuned darker than the reference mockup (#B06A14 → #985A0E) to clear WCAG AA (4.68:1 on its paper); Azure (5.99:1) and Ember (5.00:1) already pass. See docs/superpowers/specs/2026-06-24-calm-restyle-rollout.md */ /* AZURE — secure / on-track / requalified */ --pace-secure: #1C5BA0; /* text + icon on light */ --pace-secure-paper: #E8F0FB; /* pill / chip fill */ --pace-secure-light: #A7C6EA; /* progress-bar fill */ --pace-secure-border: #BFD6EF; --pace-secure-gain: #7FB0E2; /* planned-lift segment */ --pace-secure-dark: #5C9BDB; /* on the dark navy panel */ /* SANDSTONE — caution / short / needs-setup / pending / no-loyalty */ --pace-caution: #985A0E; --pace-caution-paper: #FBEAD2; --pace-caution-light: #E3B061; --pace-caution-border: #ECCF9C; --pace-caution-dark: #E8A94B; /* EMBER — at risk / will-drop / past-open */ --pace-risk: #A53A1A; --pace-risk-paper: #F7DCD1; --pace-risk-light: #CE6A48; --pace-risk-border: #E8B9A8; --pace-risk-dark: #E07A55; /* Back-compat aliases (old names → new spectrum) so existing markup is unchanged */ --pace-on-track: var(--pace-secure); --pace-on-track-paper: var(--pace-secure-paper); --pace-on-track-light: var(--pace-secure-light); --pace-on-track-gain: var(--pace-secure-gain); --pace-on-track-border: var(--pace-secure-border); --pace-amber: var(--pace-caution); --pace-amber-paper: var(--pace-caution-paper); --pace-amber-light: var(--pace-caution-light); --pace-amber-dark: var(--pace-caution-dark); --pace-amber-border: var(--pace-caution-border); --pace-ruby: var(--pace-risk); --pace-ruby-paper: var(--pace-risk-paper); --pace-ruby-light: var(--pace-risk-light); --pace-ruby-dark: var(--pace-risk-dark); --pace-ruby-border: var(--pace-risk-border); /* Cream paper accent for the photo-panel header (Flights panel band) */ --paper-cream: #F3EAD8; /* Tier badges (paired paper + ink, always with the tier label in text) */ --tier-gold: #8B5E1F; --tier-gold-paper: #FFEFD5; --tier-platinum: #4B5563; --tier-platinum-paper: #E9EDF3; --tier-silver: #5C6981; --tier-silver-paper: #F1F3F7; --tier-diamond: #4C3A9C; --tier-diamond-paper: #E6E0F3; --tier-emerald: #057A4A; --tier-emerald-paper: #DDF5E7; /* Semantic info pair (paired with info-paper) */ --info: #1D4ED8; --info-paper: #EFF4FF; /* Ink ramp */ --ink: #1A1A1A; --ink-strong: #0A1124; --ink-muted: #5A6373; --ink-faint: oklch(50% 0 0); /* Phase 9 a11y: 4.5:1 contrast vs --paper (was 56%, ~4.0:1) */ /* Hairlines */ --hairline: oklch(88% 0 0); --hairline-strong: oklch(78% 0 0); --hairline-soft: oklch(95% 0 0); /* Chart palette */ --c-eco: #5BC8A4; --c-prem: #4C9BD6; --c-biz: #C58A2B; --c-first: #FF6810; --c-window: #0DBE6E; --c-middle: #C58A2B; --c-aisle: #4C9BD6; --c-leisure: #5BC8A4; --c-business: #4C3A9C; --c-other: #8A8678; --c-morning: #FFCB6B; --c-afternoon: #FF6810; --c-evening: #4C3A9C; --c-night: #050C1C; /* Activity-feed icon paper + border pairs (companion to --c-* fills) */ --c-business-paper: #F0E8F5; --c-business-border: #D9CCE5; --c-navy-border: #C9D2E4; /* Shadows */ --sh-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 0 rgba(14,31,59,0.02), 0 12px 28px rgba(14,31,59,0.05); --sh-card-hover: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 0 rgba(14,31,59,0.04), 0 18px 40px rgba(14,31,59,0.11); --sh-inverse: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 0 rgba(0,0,0,0.16), 0 16px 40px rgba(5,12,28,0.32); --sh-pop: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 32px rgba(14,31,59,0.18); --sh-toast: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(14,31,59,0.14); /* Easings */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-quick: cubic-bezier(0.16, 1, 0.3, 1); } [data-design-v2] { background: var(--paper); color: var(--ink); font-family: 'Public Sans', system-ui, sans-serif; /* F-024: v2 root font-size in rem (0.9375rem = 15px at the browser default of 16px) so the browser "larger text" accessibility preference scales the whole authenticated app. All child font-size tokens are rem = px / 15, so the visual scale is unchanged at 100% but honours user preferences. */ font-size: 0.9375rem; line-height: 1.55; -webkit-font-smoothing: antialiased; } [data-design-v2] .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } [data-design-v2] .serif { font-family: 'Bricolage Grotesque', Georgia, serif; } /* Calm display face — panel titles + editorial headlines (mockup `.disp`) */ [data-design-v2] .disp { font-family: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif; letter-spacing: -0.01em; } /* Chrome (top nav / sub nav) keeps Geist per the Calm mockup */ [data-design-v2] .chrome { font-family: 'Geist', system-ui, sans-serif; } @media (prefers-reduced-motion: reduce) { [data-design-v2] *, [data-design-v2] *::before, [data-design-v2] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }