/* ============================================================ GlowApp — Colors & Type Tokens Aesthetic: clean-girl / soft-luxe. Mobile-first iOS, premium, addictive, screenshot-ready. SYNCED 2026-07-19 from src/constants/tokens.ts, which is the authoritative source of truth in the app codebase. Token NAMES are unchanged so existing pages keep working; VALUES are corrected. What moved in this sync: • Coral ramp retuned to the app icon (bubblegum, was watermelon). • Type scale up ~10–12%; small steps +1 for SF Pro Rounded's lower x-height. Added the sub-micro steps (nano/pico/femto). • Radii up one step across the board (continuous iOS corners read less round, so the scale runs generous). • Aurora rebuilt pink-only — the old one carried an orange and a purple hotspot, which broke the one-accent rule. • Tracking loosened slightly (rounded is natively tighter than the grotesques the old values were tuned for). • Added a real rounded WEB fallback (Nunito). SF Pro Rounded is Apple-licensed and cannot be embedded, so off-Apple browsers were silently falling back to Arial — not rounded at all. ============================================================ */ /* ---------- Web fonts (all Google) ---------- Nunito is the web-licensed stand-in for SF Pro Rounded, which Apple's licence does not permit embedding. Apple devices still get the real face via the stack below; everyone else gets Nunito. */ @import url("https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ========================================================= COLOR — BASE PALETTE Neutral grey canvas, never stark. No warm tint; the only "color" in the system is the coral accent. ========================================================= */ /* Neutral ramp — the canvas. True grey, no warm tint. */ --neutral-50: #FBFBFB; /* lightest, near-paper */ --neutral-100: #F6F6F6; /* default base tone */ --neutral-200: #EEEEEE; /* card lift / sunken wells */ --neutral-300: #E6E6E6; /* divider / chip rest / progress track */ --neutral-400: #DCDCDC; /* hairline / soft border */ --neutral-500: #9A9A9A; /* placeholder / disabled */ --neutral-600: #828282; /* tertiary / meta text */ --neutral-700: #5F5F5F; /* body text */ --neutral-800: #454545; /* strong text */ --neutral-900: #333333; /* near-black, headlines + wordmark */ /* Bubblegum pink — the vibrant "glow" pop. Retuned to the app icon (sampled: bg #F9A0B6, bulb fill #F4C1D0, outline #AE5269). */ --coral-100: #FDE4EB; /* accent-soft / tinted fills */ --coral-200: #FAC3D1; /* ≈ icon bulb fill */ --coral-300: #F79FB6; /* ≈ icon background */ --coral-400: #F17D9C; /* default accent */ --coral-500: #D96484; /* hover */ --coral-600: #B04E6C; /* press / deep — ≈ icon outline */ /* Semantic accents — vibrant, chart-popping. These are the SATURATED signal colors (charts, numeric deltas, alerts). */ --rose: #FF4D5E; /* destructive / "needs attention" */ --moss: #2FBE82; /* positive trend — vivid, charts + numeric deltas */ --honey: #FFB020; /* warning */ --sky: #3E9BE6; /* info */ /* Semantic — SOFT pairs. Tinted background + readable ink for chips, check circles, match pills, alert rows. (The saturated tokens above are too loud as a fill; these are their muted counterparts.) */ --moss-soft: #E4F0E7; /* success/positive tinted background */ --moss-ink: #4F7A5C; /* success text/icon on --moss-soft */ --rose-soft: #F7E3DF; /* destructive/alert tinted background */ --rose-ink: #C0463C; /* destructive text/icon on --rose-soft */ --rose-press: #E23A4B; /* pressed state for a destructive fill */ --honey-soft: #F4E4D2; /* warning tinted background */ --honey-ink: #8A6A3E; /* warning text/icon on --honey-soft */ /* ========================================================= STAT TINTS — soft decorative category tints. Paired bg + ink, used ONLY to differentiate skin-attribute tiles and grouped settings rows at a glance. NOT a brand accent and NOT status — coral stays the single accent. ========================================================= */ --tint-violet-bg: #ECE5F7; --tint-violet-ink: #6E5BA8; --tint-blue-bg: #E3EEFA; --tint-blue-ink: #3585C8; --tint-gold-bg: #FBEACD; --tint-gold-ink: #C2871A; --tint-teal-bg: #DBEFEE; --tint-teal-ink: #3C8E8E; --tint-green-bg: #E3F1E6; --tint-green-ink: #3E8C5E; --tint-indigo-bg: #E8EDF6; --tint-indigo-ink: #5B6BA8; /* ========================================================= SKIN AGE SCALE — the Skin Age orb's color ENCODES how the user's skin age compares to their chronological age. Younger reads green, on-par a calm blue, older a warm amber→orange. Interpolated continuously between these anchors by year delta. Vivid on purpose; they are NOT semantic status colors. Stop deltas (years vs reference age): -10, -4, 0, +1, +2, +5, +9. ========================================================= */ --skin-age-younger-2: #00A85E; /* −10 yr — markedly younger, deep green */ --skin-age-younger-1: #21C877; /* −4 yr — a bit younger, vivid green */ --skin-age-onpar: #1E90FF; /* 0 — on par, vivid blue */ --skin-age-pivot: #F3E8C8; /* +1 yr — warm-neutral pivot */ --skin-age-older-1: #FFAB11; /* +2 yr — a little older, vivid amber */ --skin-age-older-2: #FC7A02; /* +5 yr — older, vivid orange */ --skin-age-older-3: #F26800; /* +9 yr — markedly older, deep orange */ /* ========================================================= COLOR — SEMANTIC (use these in product code) ========================================================= */ --bg: var(--neutral-100); /* neutral base behind elevated surfaces */ --bg-screen: #FCFCFC; /* iOS screen surface — soft near-white */ --bg-sunken: var(--neutral-200); /* input rest, list row, sunken wells */ --surface-card: #FFFFFF; /* card / sheet fill — lifts off the page */ --fg: var(--neutral-900); /* primary text */ --fg-2: var(--neutral-800); /* secondary text */ --fg-3: var(--neutral-600); /* tertiary / metadata */ --fg-muted: var(--neutral-500); /* placeholder / disabled */ --fg-on-accent: #FFFFFF; /* text on coral fill */ --black: #000000; /* Apple Sign In button (Apple HIG) */ --border: var(--neutral-400); --scrim: rgba(0, 0, 0, 0.45); /* dimmed backdrop behind modals */ --hairline: rgba(0, 0, 0, 0.08); /* Inset hairline ramp — the 1px ring drawn via box-shadow on cards, rows, inputs, bubbles. Warm-dark base so it reads on the near-white surfaces. */ --hairline-1: rgba(40, 40, 42, 0.05); /* faint — cards, tiles, mini stats */ --hairline-2: rgba(40, 40, 42, 0.08); /* default — bubbles, inputs, list cards */ --hairline-3: rgba(40, 40, 42, 0.10); /* strong — option-card rest border */ --grabber: #DADADA; /* bottom-sheet grab handle */ --accent: var(--coral-400); --accent-hover: var(--coral-500); --accent-press: var(--coral-600); --accent-soft: var(--coral-100); /* tinted backgrounds (chips, icon tiles) */ --accent-wash: rgba(241, 125, 156, 0.07); /* faintest blush fill */ --accent-wash-line: rgba(241, 125, 156, 0.13); /* hairline to pair with wash */ /* ========================================================= AURORA — celebratory gradient. ONLY on: reveal screens, paywall, score reveals, "your glow" moments. Do NOT use as default screen background. Rebuilt from tokens.ts: pink-only. The previous version carried an orange (#FFB07A) and a purple (#E59BE0) hotspot — a second and third accent, which the one-accent rule does not allow. ========================================================= */ --aurora: radial-gradient(60% 55% at 18% 12%, #F79FB6 0%, transparent 62%), radial-gradient(50% 45% at 85% 8%, #F17D9C 0%, transparent 58%), radial-gradient(70% 60% at 50% 100%, #FBD3DE 0%, transparent 65%), linear-gradient(180deg, #FFF4F8 0%, #FBD9E3 100%); /* @kind color */ --aurora-soft: radial-gradient(60% 55% at 20% 10%, #FCE0E9 0%, transparent 60%), radial-gradient(55% 50% at 82% 6%, #FBD9E4 0%, transparent 58%), linear-gradient(180deg, #FCFCFC 0%, #FBE7ED 100%); /* @kind color */ /* Warmer 4-spot soft wash — referral gift tile / invite surfaces only. */ --aurora-soft-warm: radial-gradient(58% 52% at 16% 10%, #FFDDE9 0%, transparent 60%), radial-gradient(54% 48% at 84% 12%, #FFE7D4 0%, transparent 58%), radial-gradient(60% 55% at 82% 90%, #F1DAF6 0%, transparent 58%), radial-gradient(58% 52% at 12% 92%, #FCD9E6 0%, transparent 58%), linear-gradient(180deg, #FEFCFD 0%, #FBEAF1 100%); /* @kind color */ /* ========================================================= TYPOGRAPHY — Families - Wordmark: Pacifico (lowercase, two-tone — Google) - Everything else: SF Pro Rounded on Apple, Nunito everywhere else. Display and body share the face; the two tokens stay separate so roles keep their semantic split and a face swap stays one line. ========================================================= */ --font-wordmark: "Pacifico", "Brush Script MT", cursive; --font-display: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-sans: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* Weights — name them rather than restating numerals. */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-semibold: 600; /* @kind other */ --fw-bold: 700; /* @kind other */ --fw-extrabold: 800; /* @kind other */ /* ========================================================= TYPE SCALE — mobile-first iOS. Numbers in px. Scaled up ~10–12% from the original for a larger, more legible reading size. Small steps (callout and below) bumped +1 for SF Pro Rounded — its lower x-height reads optically smaller at the same px. --fs-callout intentionally lands on body's value; roles stay distinct. ========================================================= */ --fs-hero: 74px; /* Glow Score number (huge) */ --fs-mega: 56px; /* reveal headline */ --fs-display: 43px; /* screen titles, large */ --fs-h1: 30px; --fs-h2: 24px; --fs-h3: 20px; --fs-body: 18px; --fs-callout: 18px; --fs-sub: 17px; --fs-foot: 16px; --fs-caption: 15px; --fs-micro: 14px; /* eyebrow / all-caps tags */ /* Sub-micro label sizes — dense data-viz / overlay labels ONLY (chart axes, pins, ingredient pills). Never body copy or UI chrome. */ --fs-nano: 13px; --fs-pico: 12px; --fs-femto: 11px; --lh-tight: 1.04; /* @kind other */ --lh-snug: 1.18; /* @kind other */ --lh-normal: 1.35; /* @kind other */ --lh-relaxed: 1.5; /* @kind other */ /* Negative steps retuned for SF Pro Rounded — natively tighter than the grotesques the old values were clamped for. */ --ls-tighter: -0.02em; --ls-tight: -0.008em; --ls-normal: 0em; --ls-loose: 0.04em; --ls-wide: 0.1em; /* compact all-caps labels (category tags) */ --ls-eyebrow: 0.16em; /* small caps eyebrows */ /* ========================================================= SPACING — 4pt grid, iOS-friendly ========================================================= */ --sp-0: 0; /* @kind spacing */ --sp-half: 2px; /* micro nudge, tighter than the grid (tag rows) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-screen-x: 20px; /* Web-only — the app has no desktop viewport, so these are the site's own. Use them for marketing-page rhythm; everything above comes from the app. */ --sp-section: clamp(64px, 10vw, 128px); /* @kind spacing */ /* vertical rhythm between sections */ --content-max: 1120px; /* default content column */ --content-text: 680px; /* prose measure */ /* ========================================================= RADII — soft, generous. Every radius pairs with iOS continuous (squircle) corners in the app; continuous curves read slightly less round at the same value, hence the generous scale. ========================================================= */ --r-tail: 5px; /* chat-bubble tail corner */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; /* default card */ --r-xl: 32px; /* big "hero" card / sheet */ --r-2xl: 40px; --r-pill: 999px; /* ========================================================= SHADOWS — diffuse, soft, warm-tinted. No harsh blacks. Coral RGB retuned to the new accent (241,125,156 / 217,100,132). ========================================================= */ --shadow-1: 0 1px 2px rgba(58, 58, 56, 0.04), 0 2px 8px rgba(58, 58, 56, 0.04); --shadow-2: 0 2px 6px rgba(58, 58, 56, 0.05), 0 10px 24px rgba(58, 58, 56, 0.06); --shadow-3: 0 4px 10px rgba(58, 58, 56, 0.06), 0 20px 48px rgba(58, 58, 56, 0.09); /* Card lift: soft drop + barely-there hairline ring. Used by white cards so the shadow does the work, not a stroke. */ --shadow-card: 0 2px 8px -4px rgba(40, 40, 42, 0.10), inset 0 0 0 1px rgba(40, 40, 42, 0.05); --shadow-glow: 0 0 0 1px rgba(241, 125, 156, 0.28), 0 10px 40px rgba(241, 125, 156, 0.36); /* Coral cast shadows — the colored glow under filled-coral controls. Distinct from --shadow-glow (a ring+bloom for reveal cards). */ --shadow-coral: 0 6px 18px rgba(241, 125, 156, 0.32); /* primary button, rest */ --shadow-coral-strong: 0 10px 28px rgba(241, 125, 156, 0.42), 0 2px 6px rgba(217, 100, 132, 0.3); /* glow CTA */ --shadow-coral-sm: 0 6px 16px -5px rgba(241, 125, 156, 0.7); /* small floating coral controls */ --shadow-coral-soft: 0 4px 12px rgba(241, 125, 156, 0.16); /* faint accent bloom */ --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(58, 58, 56, 0.05); /* ========================================================= MOTION — gentle, expensive feel ========================================================= */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ --dur-reveal: 900ms; /* @kind other */ /* ========================================================= LAYOUT — iOS-ish ========================================================= */ --max-w-mobile: 390px; --tap-min: 44px; --control-h: 62px; /* filled button (primary/secondary/destructive) */ --control-h-sm: 46px; /* small button */ --control-pad-x: 28px; /* filled button horizontal padding */ --icon-button: 38px; /* circular icon-button chip */ --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px); } /* ============================================================ BASE — type roles. Use class or directly on element. ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Wordmark — Pacifico, lowercase, two-tone */ .t-wordmark { font-family: var(--font-wordmark); font-weight: var(--fw-regular); text-transform: lowercase; letter-spacing: -0.01em; line-height: 1; color: var(--neutral-900); } .t-wordmark .accent { color: var(--coral-400); } /* Display roles — tight tracking */ .t-hero, .t-mega, .t-display { font-family: var(--font-display); letter-spacing: var(--ls-tighter); line-height: var(--lh-tight); color: var(--fg); } .t-hero { font-size: var(--fs-hero); font-weight: var(--fw-bold); } .t-mega { font-size: var(--fs-mega); font-weight: var(--fw-bold); } .t-display { font-size: var(--fs-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } /* UI / sans roles */ h1, .t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg); } h2, .t-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg); } h3, .t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--fg); } p, .t-body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-2); } .t-callout { font-size: var(--fs-callout); font-weight: var(--fw-medium); color: var(--fg); } .t-sub { font-size: var(--fs-sub); color: var(--fg-2); } .t-foot { font-size: var(--fs-foot); color: var(--fg-3); } .t-caption { font-size: var(--fs-caption); color: var(--fg-3); } .t-eyebrow { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--fg-3); } /* Compact eyebrow — card metadata, product category tags. */ .t-eyebrow-sm { font-family: var(--font-sans); font-size: var(--fs-nano); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--fg-3); } .t-num { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: var(--ls-tighter); line-height: var(--lh-tight); } .t-mono { font-family: var(--font-mono); font-size: var(--fs-foot); } a { color: var(--accent); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out-soft); } a:hover { opacity: 0.85; }