/* ========================================================================== BECoach Design System — Tokens Extracted from BECoach/DesignSystem.swift (daocoding/BECoach) ========================================================================== */ /* Fonts loaded via in the HTML head (Nunito, Noto Serif SC, JetBrains Mono). */ :root { /* ---------- Core palette ---------- SF-accurate hexes copied straight from DesignSystem.swift. */ /* Coral Sunset — primary accent gradient */ --coral-start: #FF6B6B; /* ikigaiCoralStart / error */ --coral-end: #FFE66D; /* ikigaiCoralEnd / warning */ /* Ikigai circle pillars (four Venn circles) */ --circle-love: #FFB3BA; /* soft rose */ --circle-talent: #88D8F4; /* sky blue */ --circle-value: #A8E6CF; /* sage mint */ --circle-needs: #66BF8C; /* forest mint (r:.4 g:.75 b:.55) */ /* Ikigai Center — reserved for mandala core + primary CTA fill */ --gold-start: #FFEAA7; --gold-end: #FDCB6E; /* Deep midnight background */ --bg-start: #0D1B2A; --bg-end: #1B263B; /* Foreground / text */ --fg-primary: #F8F9FA; /* ikigaiTextPrimary */ --fg-secondary: #ADB5BD; /* ikigaiTextSecondary */ --fg-tertiary: #6C757D; /* ikigaiTextTertiary */ --fg-on-light: #0D1B2A; /* dark text on gold/gradient CTAs */ --fg-on-glass-button: #261A0D; /* dark brown on gold glass button */ /* Semantic */ --success: #4ECDC4; --warning: #FFE66D; --error: #FF6B6B; /* Glass surfaces */ --glass-bg: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.15); --glass-highlight: rgba(255,255,255,0.25); /* Coach Chat (light surface) — StarterPromptsView.swift */ --chat-teal: #008C8C; /* Color(red:0, green:0.549, blue:0.549) */ --chat-teal-soft: rgba(0,140,140,0.08); --chat-teal-border: rgba(0,140,140,0.4); --chat-bg: #FFFFFF; --chat-surface: rgba(118,118,128,0.12); /* systemGray6 @60% */ --chat-stroke: rgba(60,60,67,0.18); /* systemGray4 @40% */ /* ---------- Gradients ---------- */ --grad-coral: linear-gradient(135deg, var(--coral-start), var(--coral-end)); --grad-golden: linear-gradient(180deg, var(--gold-start), var(--gold-end)); --grad-bg: linear-gradient(180deg, var(--bg-start), var(--bg-end)); --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); --grad-gold-glass-btn: linear-gradient(135deg, rgba(242,217,140,0.85), rgba(230,192,115,0.75)); /* ---------- Type ---------- Primary face: SF Pro Rounded (system). Web fallback: Nunito. Serif (calligraphic): SF Pro Serif. Web fallback: Noto Serif SC. Mono: SF Mono. Web fallback: JetBrains Mono. */ --font-rounded: "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: "SF Pro", "Noto Serif SC", ui-serif, Georgia, serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Display */ --f-display-lg: 700 48px/1.08 var(--font-rounded); --f-display-md: 700 36px/1.12 var(--font-rounded); --f-display-sm: 700 28px/1.18 var(--font-rounded); /* Headline */ --f-headline-lg: 600 24px/1.25 var(--font-rounded); --f-headline-md: 600 20px/1.3 var(--font-rounded); --f-headline-sm: 600 18px/1.35 var(--font-rounded); /* Body */ --f-body-lg: 400 17px/1.5 var(--font-rounded); --f-body-md: 400 15px/1.5 var(--font-rounded); --f-body-sm: 400 13px/1.55 var(--font-rounded); /* Label */ --f-label-lg: 500 14px/1.35 var(--font-rounded); --f-label-md: 500 12px/1.35 var(--font-rounded); --f-label-sm: 500 11px/1.4 var(--font-rounded); /* Calligraphic */ --f-jp-lg: 300 32px/1.2 var(--font-serif); --f-jp-md: 300 24px/1.25 var(--font-serif); /* Mono */ --f-mono-sm: 500 11px/1.4 var(--font-mono); --f-mono-xs: 700 9px/1.3 var(--font-mono); /* ---------- Spacing scale (4-based) ---------- */ --space-xxxs: 2px; --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-xxxl: 64px; /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-xxl: 32px; --radius-full: 999px; /* ---------- Shadows & glows ---------- */ --shadow-soft: 0 10px 20px rgba(0,0,0,0.30); --shadow-lift: 0 14px 40px rgba(0,0,0,0.35); --shadow-chat: 0 1px 2px rgba(0,0,0,0.04); --glow-gold: 0 0 20px rgba(253,203,110,0.5); --glow-coral: 0 0 20px rgba(255,107,107,0.5); --glow-talent: 0 0 20px rgba(136,216,244,0.5); /* ---------- Motion ---------- */ --ease-spring-quick: cubic-bezier(0.16, 1.2, 0.3, 1); /* response .3, damping .7 */ --ease-spring-standard: cubic-bezier(0.22, 1.1, 0.36, 1); /* response .5, damping .8 */ --ease-spring-slow: cubic-bezier(0.22, 1.05, 0.4, 1); /* response .8, damping .85 */ --ease-out-soft: cubic-bezier(0.25, 0.8, 0.3, 1); --dur-quick: 200ms; --dur-standard: 350ms; --dur-slow: 600ms; --dur-breath: 3000ms; --dur-pulse: 1500ms; --dur-float: 4000ms; /* ---------- Misc ---------- */ --press-scale-btn: 0.97; --press-scale-card: 0.98; --press-scale-icon: 0.90; --disabled-opacity: 0.5; } /* ========================================================================== Semantic HTML defaults ========================================================================== */ html, body { background: var(--grad-bg); color: var(--fg-primary); font: var(--f-body-lg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: var(--f-display-sm); letter-spacing: -0.01em; margin: 0; } h2 { font: var(--f-headline-lg); margin: 0; } h3 { font: var(--f-headline-md); margin: 0; } h4 { font: var(--f-headline-sm); margin: 0; } p { font: var(--f-body-md); margin: 0; color: var(--fg-primary); } small { font: var(--f-label-sm); color: var(--fg-tertiary); } code, kbd, pre { font: var(--f-mono-sm); color: var(--fg-secondary); } /* Glass surface utility */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: var(--radius-lg); } /* The wordmark — IKIGAI */ .wordmark { font: 700 28px/1 var(--font-rounded); letter-spacing: 0.5em; text-indent: 0.5em; /* balance the trailing spacing visually */ color: var(--fg-primary); text-transform: uppercase; }