/* ============================================================================ SucsessMaperrs — Editorial Design Tokens (web) Ported 1:1 from the Flutter app's Editorial system (editorial_theme.dart). Include this file, then use the custom properties below. Dark mode: set . ============================================================================ */ :root { /* ---- Surfaces ---- */ --paper: #FBF7EE; --paper-2: #F4EEDF; --paper-3: #ECE3CE; --card: #FFFFFF; /* ---- Ink (text) ---- */ --ink: #1A1612; --ink-2: #4A4238; --ink-3: #6B6151; /* darkened from #8A7F6F to clear WCAG AA (≥4.5:1) on all light surfaces */ /* ---- Rules (hairlines) ---- */ --rule: rgba(26, 22, 18, 0.10); --rule-2: rgba(26, 22, 18, 0.05); /* ---- Gold (primary accent) ---- */ --gold: #B5873A; --gold-deep: #8A6420; --gold-soft: #E8D9B8; --gold-tint: #F5EBD3; --gold-glow: #E8B968; --saffron: #C9772B; /* ---- Cosmic (navy + cream) ---- */ --navy: #1B2444; --cream: #F6EFDC; /* ---- Sage (psychometric accent) ---- */ --sage: #5A7350; --sage-deep: #3F5638; --sage-tint: #EBF1E4; --sage-soft: #C8D8BC; /* ---- Violet (blueprint accent) ---- */ --violet: #5C4A78; --violet-tint: #ECE5F2; /* ---- Rust (error / alert) ---- */ --rust: #9A4D3A; --rust-deep: #7A3C2C; --rust-tint: #F4E2DA; /* ---- Per-report accent aliases ---- */ --accent-astrology: var(--gold-deep); --accent-psychometric: var(--sage-deep); --accent-blueprint: var(--violet); /* ---- Fonts ---- */ --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Spacing (app scale: xs4 sm8 md12 lg16 xl20 xxl24) ---- */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.25rem; /* 20px */ --space-2xl: 1.5rem; /* 24px */ --space-3xl: 2.25rem; /* 36px — section-header / block gap */ /* web-only section rhythm — fluid so pages breathe on desktop, stay tight on mobile */ --space-section: clamp(5rem, 2.5rem + 5vw, 6rem); /* 80px → 96px */ /* ---- Radius (app: sm12 md14 lg16 xl18 xxl22 pill) ---- */ --radius-sm: 12px; --radius-md: 14px; --radius-lg: 16px; --radius-xl: 18px; --radius-2xl: 22px; --radius-pill: 999px; /* ---- Borders ---- */ --border-hairline: 1px; --border-focus: 1.5px; /* ---- Type scale (web-tuned from the app; same hierarchy) ---- Hero/display grow with the viewport; body is web-legible. */ --type-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); /* app display 34 → web hero */ --type-h1: clamp(2rem, 1.4rem + 2.2vw, 3rem); --type-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --type-serif-title: 1.125rem; /* app serifTitle */ --type-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* italic Fraunces */ --type-body: 1.0625rem; /* 17px — web-legible (app body 15) */ --type-small: 0.9375rem; /* 15px */ --type-eyebrow: 0.6875rem; /* 11px mono uppercase */ /* tracking */ --track-display: -0.02em; --track-eyebrow: 0.18em; /* app eyebrow 1.89/10.5 ≈ 0.18em */ --track-mono: 0.04em; } [data-theme="dark"] { --paper: #15120E; --paper-2: #211C15; --paper-3: #2B241B; --card: #221C16; --ink: #F2EADB; --ink-2: #C9BEAB; --ink-3: #B4A896; --rule: rgba(242, 234, 219, 0.14); --rule-2: rgba(242, 234, 219, 0.07); --gold: #D8A84E; --gold-deep: #E0B45C; --gold-soft: #5A4A28; --gold-tint: #2E2614; --gold-glow: #E8B968; --saffron: #E0903F; --navy: #232C50; --cream: #F6EFDC; --sage: #8FB07F; --sage-deep: #A6C699; --sage-tint: #1C2618; --sage-soft: #38472F; --violet: #A99BC6; --violet-tint: #261F30; --rust: #D08566; --rust-deep: #E0A083; --rust-tint: #2E1C16; }