/* ============================================================= * Myra · Design Tokens — "Stripe Lumen" (Phase 2A · Step 2) * * Source of truth for colours, type, spacing, radii, shadows, * motion and z-index. Components MUST consume tokens — never * inline hex codes or magic numbers. * * Naming is semantic (--bg-primary, --brand-primary, …) so that * dark mode (deferred to v2) drops in via prefers-color-scheme * without touching component CSS. * * Backward-compat shim at the bottom remaps legacy variables * (--bg, --accent, --muted, …) onto the new tokens so existing * pages roll forward to the new palette without a per-screen * migration. Mild visible shift on legacy screens by design. * ============================================================= */ :root { /* ===== Surfaces ============================================ */ --bg-primary: #FBFAF7; /* default canvas; off-white with a faint warm cast */ --bg-elevated: #FFFFFF; /* card / panel surface that lifts above canvas */ --bg-deeper: #F2EEE6; /* subtle warm zoning band, never cool gray */ --bg-inverse: #0A0A0F; /* rare; for dark callouts on light pages */ /* Hero radial — soft warm purple → peach. Use only on hero, billing-success, and 1–2 empty states. See DESIGN_SYSTEM.md. */ --gradient-hero: radial-gradient(ellipse 80% 60% at 85% -10%, #F1E8FF 0%, transparent 55%), radial-gradient(ellipse 70% 55% at 0% 110%, #FFE3CC 0%, transparent 60%), var(--bg-primary); /* Mobile fallback — flat warm surface on viewports < 600px so gradients don't compete with content in narrow widths. */ --gradient-hero-fallback: var(--bg-primary); /* ===== Text =============================================== */ --text-primary: #0A0A0F; /* rich near-black, faint blue undertone */ --text-secondary: #4F4D5C; /* body labels, AA on bg-primary */ --text-tertiary: #87859A; /* placeholders, metadata, dim labels */ --text-inverse: #FFFFFF; /* on brand / on dark surfaces */ --text-link: #5544E5; /* same family as brand-primary, slightly darker for AA */ /* ===== Borders & dividers ================================= */ --border-subtle: #E8E5DE; /* default 1px hairline */ --border-strong: #D6D2C9; /* hover/focus borders, table rules */ --border-inverse: #1F1E2A; /* dark surfaces, deferred dark mode */ /* ===== Brand ============================================== */ --brand-primary: #6951FF; /* evolved from #7C3AED — warmer, richer (Stripe-family) */ --brand-primary-hover: #5544E5; /* −2 lightness for hover */ --brand-primary-active: #4838C7; /* −4 for press / active */ --brand-soft: #EEEAFF; /* wash for active-nav, soft pills */ --brand-soft-hover: #E0D9FF; /* slightly deeper soft wash */ --brand-accent-2: #FFB088; /* peach — gradient end + sparing accent */ --brand-accent-2-soft: #FFE7D6; /* peach wash for badges, highlights */ /* ===== Semantic =========================================== */ --success: #1F8A66; /* teal-leaning green, sits inside palette family */ --success-bg: #DCF1E8; /* soft success wash */ --success-border: #B6E0CE; --warning: #D88A2A; /* warm amber */ --warning-bg: #FBEBD3; --warning-border: #F1D5A4; --error: #D24C4C; /* warm crimson, not pure red */ --error-bg: #FBE0DE; --error-border: #F2BCB7; --info: var(--brand-primary); --info-bg: var(--brand-soft); --info-border: #D9CFFF; /* ===== Typography ========================================= */ /* Inter is loaded by base.html. Display is Inter today; switch to Söhne when licensed (pure --font-display swap, no comp changes). */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --text-6xl: 60px; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --tracking-tighter: -0.03em; /* hero-scale display */ --tracking-tight: -0.02em; /* default for headings */ --tracking-normal: 0; --tracking-wide: 0.02em; /* small labels, eyebrows */ --tracking-widest: 0.08em; /* uppercase eyebrow labels */ /* ===== Spacing (4px grid) ================================= */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ===== Radii ============================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ===== Shadows (warm-tinted, gradient-influenced) ========== */ /* Tinted toward a soft purple — not gray — so depth feels consistent with the hero gradient and brand. */ --shadow-xs: 0 1px 2px rgba(70, 40, 100, 0.04); --shadow-sm: 0 2px 6px rgba(70, 40, 100, 0.05); --shadow-md: 0 4px 12px rgba(70, 40, 100, 0.06); --shadow-lg: 0 8px 24px rgba(70, 40, 100, 0.08); --shadow-xl: 0 16px 48px rgba(70, 40, 100, 0.10); --shadow-2xl: 0 24px 64px rgba(70, 40, 100, 0.12); --shadow-focus: 0 0 0 4px rgba(105, 81, 255, 0.18); /* brand focus ring */ /* ===== Motion ============================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Stripe-style entrance */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* default for state changes */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* reserved; do not default to it */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; /* ===== Z-index =========================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 2000; /* ===== Layout =========================================== */ --container-compact: 760px; --container-medium: 1120px; --container-wide: 1480px; } /* ============================================================= * Backward-compat shim — LITERAL legacy values * * Production is live. Mixed-purple screens (some elements on the * new brand, some on the old) would read unprofessional and bite * trust. So legacy aliases preserve the EXACT old hex values * here — they do NOT point at the new tokens. Each existing * screen therefore stays visually identical to today, byte for * byte, until Phase 3 migrates it atomically. * * Per-screen migration in Phase 3: * 1. Screen swaps every var(--accent) / hardcoded #7C3AED for * var(--brand-primary), var(--bg) for var(--bg-primary), … * 2. Screen drops out of the shim's coverage by no longer * reading legacy var names. * * Loaded AFTER the inline