/* ============================================================ BABYLON PARK DESIGN TOKENS Visual ID reference: All screens Source: Demo.png visual language analysis ============================================================ */ :root { /* --- Brand Colors --- */ --color-brand-primary: #b5ff2d; /* Lime green - wordmark, accent text, highlights */ --color-brand-secondary: #7c3aed; /* Purple - glow, borders, accents */ --color-brand-orange: #f97316; /* Orange - primary CTA base */ --color-brand-amber: #fbbf24; /* Amber - primary CTA highlight */ /* --- Background System --- */ --color-bg-deep: #0a0818; /* Deepest navy - base */ --color-bg-base: #0d0b2b; /* Primary dark purple-navy */ --color-bg-mid: #1a1545; /* Slightly lighter for cards */ --color-bg-surface: #1e1850; /* Card/surface background */ --color-bg-surface-2: #231d5c; /* Elevated surface */ --color-bg-overlay: rgba(10, 8, 24, 0.6); /* Scrim overlay on background */ --color-bg-scrim: rgba(10, 8, 24, 0.75); /* Stronger scrim for form areas */ /* --- Text --- CHG-20260923-009 (BR-A11Y-017): three values below were raised from their original opacity/lightness. Each failed 4.5:1 against --premium-surface-bg, the lightest surface a card in this app can flatten to (see tests/unit/contrast.mjs for how that surface and the darkest one, --color-bg-deep, were chosen). Hue is unchanged in every case; only alpha (tertiary, placeholder) or HSL lightness (error) moved. Exact before/after ratios are recorded in docs/16. */ --color-text-primary: #ffffff; --color-text-secondary: rgba(255, 255, 255, 0.72); --color-text-tertiary: rgba(255, 255, 255, 0.60); /* was 0.48: 3.70:1 on the lightest card, needed 4.5:1 */ --color-text-accent: #b5ff2d; --color-text-placeholder: rgba(255, 255, 255, 0.58); /* was 0.36: 2.76:1 on the lightest card, needed 4.5:1 */ --color-text-error: #ff9494; /* was #ff6b6b: 3.63:1 on the lightest card, needed 4.5:1 (same hue/saturation, lighter) */ --color-text-success: #4ade80; /* --- Buttons --- */ --btn-primary-bg: linear-gradient(135deg, #f97316 0%, #fbbf24 100%); --btn-primary-text: #1a0a00; --btn-primary-shadow: 0 8px 32px rgba(249, 115, 22, 0.4); --btn-secondary-bg: transparent; --btn-secondary-border: rgba(181, 255, 45, 0.55); --btn-secondary-text: #ffffff; --btn-secondary-shadow: 0 0 16px rgba(181, 255, 45, 0.16); --btn-disabled-bg: rgba(255, 255, 255, 0.12); --btn-disabled-text: rgba(255, 255, 255, 0.32); /* CHG-20260827-001: 16px -> var(--radius-lg) (24px). Merged from Babylon_UI_Asset_Pack_2/docs/DESIGN_TOKENS.css's --bp-radius-pill button treatment and Welcome-Approved.png's own CTA corners, which read closer to a full rounded pill than the previous 16px. Reuses the existing radius scale rather than introducing a new raw value. */ --btn-radius: var(--radius-lg); --btn-height: 56px; --btn-height-primary: var(--btn-height); --btn-height-secondary: 52px; --btn-height-compact: 44px; --btn-font-size: 17px; --btn-font-weight: 700; /* --- Inputs --- */ --input-bg: rgba(255, 255, 255, 0.08); --input-bg-focused: rgba(255, 255, 255, 0.12); --input-border: rgba(255, 255, 255, 0.12); --input-border-focused: rgba(139, 92, 246, 0.8); /* CHG-20260923-009 fix round 1: was rgba(255,107,107,0.8) (the old --color-text-error hue) - 2.83:1 on --premium-surface-bg, below the 3:1 non-text threshold for a border (inputs render inside premium cards, e.g. Create Account). Same alpha, hue rebased to the new --color-text-error (#ff9494 = rgb(255,148,148)): 3.63:1 on --premium-surface-bg, 6.22:1 on --color-bg-deep. Closing round (CHG-20260923-007): opaque. A border is painted over the field's own fill, and against that fill on the lightest card the 0.8 alpha measured 2.96:1 (2.68:1 on the focused fill), under 3:1. Opaque, the same color measures 3.75:1 and 3.33:1 there, and 4.76:1 on the lightest card itself (tests/unit/contrast.mjs, "the shared error border"). */ --input-border-error: rgb(255, 148, 148); /* Closing round fix (Minor 5, CHG-20260925-002): making the input error border opaque above also brightened three DECORATIVE notice borders that borrowed the same token - family.css .fam-alert, play.css .play-scan__error, a11ySettings.css .a11y-settings__notice. None of them is text or an interactive control (BR-A11Y rules bind those, not a static notice panel's own border), so they get their own token here at the PREVIOUS 0.8-alpha value instead of following the input border to opaque. Not added to tests/unit/contrast.mjs for the same reason - that suite measures text tokens and control fills/borders, and a decorative panel border is neither. */ --notice-border-error: rgba(255, 148, 148, 0.8); --input-radius: 14px; --input-height: 56px; --input-padding: 0 16px; --input-font-size: 16px; /* --- Cards and Surfaces --- */ --card-bg: radial-gradient(110% 95% at 8% -8%, rgba(139, 92, 246, 0.13) 0%, transparent 56%), linear-gradient(145deg, rgba(31, 24, 70, 0.78) 0%, rgba(10, 10, 35, 0.91) 100%); --card-bg-elevated: radial-gradient(110% 95% at 8% -8%, rgba(181, 255, 45, 0.12) 0%, transparent 54%), linear-gradient(145deg, rgba(39, 29, 83, 0.88) 0%, rgba(12, 11, 39, 0.95) 100%); --card-border: rgba(174, 132, 255, 0.26); --card-border-accent: rgba(181, 255, 45, 0.52); --card-radius: 20px; --card-radius-sm: 14px; --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); /* --- Radius scale (semantic aliases over the card/input radii above, plus the pill/circle/sheet shapes references use constantly for chips, language selectors, and bottom-sheet tops) --- */ --radius-xs: 8px; --radius-sm: var(--card-radius-sm); --radius-md: var(--card-radius); --radius-lg: 24px; /* CHG-20260827-001: merged from DESIGN_TOKENS.css's --bp-radius-hero (30px) - a large hero/character-stage panel corner, one step above --radius-lg, for the new big artwork moments this pass introduces (Welcome hero card, character-stage panels). Not used for ordinary cards, which stay on --radius-lg. */ --radius-hero: 30px; --radius-pill: 999px; --radius-circle: 50%; /* --- Glow system (the lime/purple/orange glow every reference card, button and badge uses at varying strength) --- */ --glow-lime-sm: 0 0 8px rgba(181, 255, 45, 0.35); --glow-lime-md: 0 0 16px rgba(181, 255, 45, 0.45); --glow-lime-lg: 0 0 32px rgba(181, 255, 45, 0.5); --glow-purple-sm: 0 0 8px rgba(139, 92, 246, 0.35); --glow-purple-md: 0 0 20px rgba(139, 92, 246, 0.45); --glow-purple-lg: 0 0 40px rgba(139, 92, 246, 0.5); --glow-orange-md: 0 0 20px rgba(249, 115, 22, 0.45); /* --- Hero card shadow (prominent single-card moments: balance summary, Service Code, promo hero) - stronger than --card-shadow --- */ --shadow-hero: 0 0 0 1px rgba(181, 255, 45, 0.12), 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 32px rgba(181, 255, 45, 0.18); /* --- Section / card spacing (semantic gap tokens - distinct from the raw --space-N scale below, which stays available for one-off use) --- */ --space-section-gap: 24px; --space-card-gap: 12px; --space-card-padding: 16px; --space-card-padding-lg: 20px; /* --- Shared product artwork scale (CHG-20260920-013) --- Home is the visual authority. Balance art is identical on Home and Wallet; product and compact contexts are fixed steps from it. */ --art-size-balance: clamp(62px, 9cqh, 76px); --art-size-product: clamp(84px, 11.85cqh, 100px); --art-size-compact: 52px; /* --- Spacing Scale --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* --- Screen padding --- */ /* Width-aware gutter (CHG-20260915-002): 24px at the 390px reference, easing down on narrower phones. Fluid HERE, once, so every screen that already uses this token adapts with no per-screen change. */ --screen-padding-x: clamp(14px, 6.15cqw, 24px); --screen-padding-top: 60px; --screen-padding-bottom: 40px; /* --- Typography Scale --- CHG-20260817-005: --font-family switched from Inter to Baloo 2, the chunky rounded geometric sans every *-Approved.png / *-Reference.png file uses (wordmark, headlines, and body copy alike - one family, not a display/body split). Inter stays as an explicit fallback in the stack: Baloo 2 has no Hebrew/Arabic glyphs, so the browser already falls back per-glyph for those scripts with zero extra code - do not add a separate RTL font variable for this. */ --font-family: 'Baloo 2', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 17px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 30px; --font-size-3xl: 38px; --font-size-4xl: 48px; /* --- Font weights (Baloo 2 range: 400-800) --- */ --font-weight-regular: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* --- Typography roles (semantic, layered on the raw scale above). Foundation only - per-screen adoption happens in later sprint prompts. Values derived from Welcome-Approved.png / Home-Approved.png / Settings-Reference.png headline, title, section-label, body and caption treatments. --- */ --text-hero-size: var(--font-size-3xl); --text-hero-weight: var(--font-weight-black); --text-hero-line: 1.12; --text-title-size: var(--font-size-lg); --text-title-weight: var(--font-weight-black); --text-title-line: 1.25; --text-section-size: var(--font-size-xs); --text-section-weight: var(--font-weight-bold); --text-section-line: 1.4; --text-section-tracking: 0.6px; --text-body-size: var(--font-size-base); --text-body-weight: var(--font-weight-regular); --text-body-line: 1.5; --text-caption-size: var(--font-size-xs); --text-caption-weight: var(--font-weight-regular); --text-caption-line: 1.4; /* CHG-20260821-001 (V6 full visual reconstruction) - two roles the token set was missing: a card/feature-level title (between title and section) and a large numeric hero value (balance figures, stat call-outs), so screens stop hand-rolling fontSize: '16px'/ '24px' inline for these two recurring cases. */ --text-feature-size: var(--font-size-md); --text-feature-weight: var(--font-weight-black); --text-feature-line: 1.25; --text-numeric-hero-size: var(--font-size-2xl); --text-numeric-hero-weight: var(--font-weight-black); --text-numeric-hero-line: 1.1; /* --- Z-index layers --- */ --z-background: 0; --z-content: 10; --z-overlay: 100; --z-modal: 200; --z-dev: 999; /* --- Motion --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-screen: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Dev Mode Colors --- */ --dev-bg: rgba(0, 255, 136, 0.1); --dev-border: rgba(0, 255, 136, 0.4); --dev-text: #00ff88; /* --- Cosmic background system (CSS-built, no flat screenshot assets) --- */ --bg-cosmic-gradient: radial-gradient(120% 70% at 15% 0%, #241a52 0%, transparent 55%), radial-gradient(90% 60% at 100% 100%, #16321f 0%, transparent 50%), linear-gradient(180deg, #100a30 0%, #0a0818 45%, #070613 100%); --bg-glow-purple: rgba(139, 92, 246, 0.35); --bg-glow-lime: rgba(181, 255, 45, 0.22); --bg-star-color: rgba(255, 255, 255, 0.9); --bg-star-color-dim: rgba(255, 255, 255, 0.45); /* --- Glass card (bordered stat / promo surfaces) --- */ --glass-card-bg: linear-gradient(160deg, rgba(30, 24, 80, 0.55) 0%, rgba(15, 12, 42, 0.55) 100%); --glass-card-border: rgba(181, 255, 45, 0.35); --glass-card-border-strong: rgba(181, 255, 45, 0.55); --glass-card-shadow: 0 0 0 1px rgba(181, 255, 45, 0.08), 0 12px 36px rgba(0, 0, 0, 0.35); --glass-card-radius: 22px; /* Premium surface system (CHG-20260921-001). Dan's wallet direction translated into the app's established cosmic language: a dark, translucent multi-layer fill; a controlled neon edge; and separate outer/inner depth. Components set --premium-rgb to change the accent without rebuilding the material recipe. */ --premium-rgb: 181, 255, 45; --premium-surface-bg: radial-gradient(120% 105% at 8% -12%, rgba(var(--premium-rgb), 0.14) 0%, rgba(var(--premium-rgb), 0.035) 34%, transparent 58%), radial-gradient(90% 90% at 100% 100%, rgba(91, 49, 178, 0.13) 0%, transparent 62%), linear-gradient(145deg, rgba(35, 25, 78, 0.82) 0%, rgba(15, 13, 48, 0.88) 46%, rgba(7, 9, 29, 0.94) 100%); --premium-surface-border: rgba(var(--premium-rgb), 0.54); --premium-surface-shadow: 0 0 0 1px rgba(var(--premium-rgb), 0.07), 0 0 18px rgba(var(--premium-rgb), 0.105), 0 12px 28px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.105), inset 0 -18px 28px rgba(0, 0, 0, 0.14); --premium-surface-shadow-strong: 0 0 0 1px rgba(var(--premium-rgb), 0.12), 0 0 24px rgba(var(--premium-rgb), 0.17), 0 16px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -22px 34px rgba(0, 0, 0, 0.18); --premium-surface-blur: blur(15px) saturate(1.18); /* CHG-20260827-001: merged from DESIGN_TOKENS.css's .bp-glass-card (backdrop-filter: blur(18px)) - a real frosted-glass reading over the new photographic/illustrated backgrounds this pass introduces. The prior glass-card recipe relied on background gradients alone, which was correct with zero real imagery behind it; now that some screens render actual artwork behind a card, the blur keeps text legible without raising the scrim opacity. Applied in GlassCard/ HeroCard only where a background image is actually present behind them - see each component's own usage. */ --glass-blur: blur(18px); /* --- Icon badges (Quick Actions / Offers) --- */ --icon-badge-size: 36px; --icon-badge-purple: linear-gradient(150deg, #9d6bff 0%, #6d3fd1 100%); --icon-badge-gold: linear-gradient(150deg, #ffd76a 0%, #e08a1f 100%); --icon-badge-green: linear-gradient(150deg, #8ef07a 0%, #2f9e5a 100%); --icon-badge-pink: linear-gradient(150deg, #ff9ad1 0%, #c14fa0 100%); /* --- Icon container scale (semantic sizes for icon badges wherever they appear - Settings rows, Quick Actions, list rows - so a screen picks a role instead of a raw pixel value). --icon-badge-size above is kept as the existing default/medium size for compatibility. --- */ --icon-container-sm: 36px; --icon-container-md: 44px; --icon-container-lg: 64px; --icon-container-radius: 12px; /* --- Avatar --- */ --avatar-size: 44px; /* --- Bottom navigation --- */ --app-header-height: clamp(148px, 18.4cqh, 158px); --navbar-height: 80px; --navbar-bg: rgba(9, 7, 22, 0.94); --navbar-border: rgba(255, 255, 255, 0.08); --navbar-icon-inactive: rgba(255, 255, 255, 0.5); --navbar-play-size: 56px; /* How far the raised Play button protrudes ABOVE the bar's top edge (CHG-20260915-001). One value shared by the button's own offset and the persistent-nav content inset, so the two can never drift apart and let the Play button cover a screen's bottom controls. */ --navbar-play-overhang: 20px; --navbar-play-glow: var(--glow-lime-md); /* --- Bottom sheet shell (currently hardcoded as "24px 24px 0 0" plus a hand-copied border/shadow/padding recipe in ~13 components - tokenized here so Section 2's shared sheet shell, and later per-screen sheets, have one source of truth). --- */ --sheet-radius: 24px 24px 0 0; --sheet-bg: radial-gradient(circle at 14% 0%, rgba(132, 48, 232, 0.28), transparent 42%), linear-gradient(165deg, rgba(30, 17, 70, 0.985), rgba(7, 6, 25, 0.995)); --sheet-border: 1px solid rgba(220, 76, 255, 0.42); --sheet-shadow: 0 -26px 68px rgba(0, 0, 0, 0.62), 0 -5px 24px rgba(198, 48, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.07); --sheet-padding-x: 20px; --sheet-padding-top: 10px; --sheet-padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); --sheet-scrim: rgba(4, 3, 14, 0.65); /* ============================================================ RESPONSIVE DENSITY SYSTEM (BR-LAY-001, CHG-20260915-002) 390x844 is the VISUAL REFERENCE, not a fixed runtime canvas. These tokens let one composition adapt continuously to the real app frame instead of switching between device-specific layouts. HOW THEY INTERPOLATE. Each token is `clamp(floor, fluid, reference)`: - the MAX is exactly today's value at the 390x844 reference, so the reference renders unchanged, and a taller phone is capped there rather than stretched; - the FLUID middle is a `cqh` / `cqw` fraction of the APP FRAME (`.app-viewport` is a size container), chosen so it lands on the reference value at 844px / 390px and shrinks proportionally below; - the MIN protects readability and composition on the smallest phones. There are no breakpoints here and no device names - 375x667 and every size between the QA samples resolve through the same formula. WHY CONTAINER UNITS, NOT vh/dvh. `cqh` measures the app frame, which is the thing actually being laid out. On a real phone the frame IS the dynamic viewport (100dvh), so it tracks browser chrome; on a desktop review window the frame is capped at 844px while `dvh` would measure the whole browser window - which would wrongly inflate or shrink the design. WHAT IS DELIBERATELY NOT HERE. Touch-target sizes (buttons, nav, form controls, icon buttons) and body typography do not scale. Density comes out of decorative whitespace and decorative artwork first; vertical scrolling is the fallback, never clipping (BR-LAY-002). ============================================================ */ /* Vertical rhythm between major sections. 14px at 844. */ --density-section-gap: clamp(8px, 1.66cqh, 14px); /* Inner padding of content cards. 16px at 844. */ --density-card-padding: clamp(11px, 1.9cqh, 16px); /* Compact tiles (quick actions, offer cards). 10px at 844. */ --density-tile-padding: clamp(6px, 1.18cqh, 10px); /* Horizontal screen gutter - WIDTH-aware. Alias of the (now fluid) --screen-padding-x, so there is one gutter value, not two. */ --density-gutter-x: var(--screen-padding-x); /* Decorative artwork - shrinks before anything interactive does. */ --density-art-balance: clamp(38px, 6.87cqh, 58px); /* 58 at 844 */ --density-art-promo: clamp(80px, 14.7cqh, 124px); /* 124 at 844 (promo mascot) */ /* Stable Promotion Area viewport. Campaign copy may wrap differently, but autoplay must never reflow the rest of Home (CHG-20260919-001). */ --density-promo-height: clamp(146px, 18.72cqh, 158px); /* 158 at 844 */ --density-art-hero: clamp(170px, 35.54cqh, 300px); /* 300 at 844 */ /* Welcome's top breathing room. 52px at 844. */ --density-hero-top: clamp(20px, 6.16cqh, 52px); /* Larger vertical gap between hero blocks. 20px at 844. */ --density-gap-lg: clamp(8px, 2.37cqh, 20px); }