/* ========================================================================== Catwise Landing Page — Design Tokens Ported 1:1 from Flutter theme (READ-ONLY sources) and merged with the pre-existing product-wiki UI kit tokens. Flutter sources: - app/lib/core/theme/app_colors.dart → color-* tokens - app/lib/core/theme/app_spacing.dart → space-* tokens + radii - app/lib/core/theme/app_shadows.dart → shadow-* tokens - app/lib/core/theme/app_typography.dart → text-*, font-*, weight-*, leading-* Merge strategy: - Base layer is supabuilder/product-wiki/ui-kit/tokens.css (already merges Flutter + "playful direction" additions). - Where ui-kit drifted from Flutter source, Flutter source wins (ticket constraint: values MUST come 1:1 from Flutter). Corrections are flagged inline with "SOURCE:" comments. - Additions required by the ticket (z-indices, any missing radii) live in their own marked sections. No SCSS. No JS. No build step. Single :root {} block. ========================================================================== */ :root { /* ========================================================================== COLORS — Brand SOURCE: app_colors.dart (class AppColors) ========================================================================== */ --color-primary: #FF9F89; /* AppColors.primary */ --color-primary-dark: #E8876F; /* AppColors.primaryDark */ --color-background: #FFF9F2; /* AppColors.background */ --color-surface: #FFFFFF; /* AppColors.surface */ --color-surface-variant: #FFF5ED; /* AppColors.surfaceVariant */ --color-on-primary: #FFFFFF; /* AppColors.onPrimary */ --color-on-background: #2D2D2D; /* AppColors.onBackground */ --color-on-surface: #2D2D2D; /* AppColors.onSurface */ --color-muted: #8E8E93; /* AppColors.muted */ --color-border: #E5E5EA; /* AppColors.border */ --color-border-focused: #FF9F89; /* AppColors.borderFocused */ /* DERIVED: not present in Flutter; carried over from ui-kit tokens.css for selected-state backgrounds on the landing page. Safe 10% tint of primary. */ --color-primary-light: #FFE8E0; /* derived — not in app_colors.dart */ /* ========================================================================== COLORS — Accent SOURCE: app_colors.dart (Magic Patterns accents) ========================================================================== */ --color-accent-green: #A7E6B8; /* AppColors.accentGreen */ --color-accent-yellow: #FFE8A3; /* AppColors.accentYellow */ --color-accent-blue: #A3D8FF; /* AppColors.accentBlue */ --color-accent-purple: #D8B4FE; /* AppColors.accentPurple */ /* ========================================================================== COLORS — Category Tags (bg/text pairs) SOURCE: app_colors.dart ========================================================================== */ --color-tag-activity-bg: #FFF3E0; /* AppColors.activityBg */ --color-tag-activity-text: #E65100; /* AppColors.activityText */ --color-tag-health-bg: #E8F5E9; /* AppColors.healthBg */ --color-tag-health-text: #1B5E20; /* AppColors.healthText */ --color-tag-affection-bg: #FCE4EC; /* AppColors.affectionBg */ --color-tag-affection-text: #880E4F; /* AppColors.affectionText */ --color-tag-behaviour-bg: #FFF8E1; /* AppColors.behaviourBg */ --color-tag-behaviour-text: #F57F17; /* AppColors.behaviourText */ --color-tag-mood-bg: #E8EAF6; /* AppColors.moodBg */ --color-tag-mood-text: #283593; /* AppColors.moodText */ --color-tag-confidence-bg: #E1F5FE; /* AppColors.confidenceBg */ --color-tag-confidence-text:#01579B; /* AppColors.confidenceText */ /* ========================================================================== COLORS — Care Area / Domain accents SOURCE: app_colors.dart (canonical). NOTE: ui-kit tokens.css had drifted values for several of these; Flutter source wins per ticket constraint. ========================================================================== */ --color-domain-health: #14B8A6; /* AppColors.domainHealth — teal-500 */ --color-domain-food-water: #F97316; /* AppColors.domainFoodWater — orange-500 */ --color-domain-grooming: #F472B6; /* AppColors.domainGrooming — pink-400 */ --color-domain-play: #8B5CF6; /* AppColors.domainPlay — violet-500 */ --color-domain-litter: #6B9E8C; /* AppColors.domainLitter — eucalyptus */ --color-domain-sleep: #6366F1; /* AppColors.domainSleep — indigo-500 */ --color-domain-environment: #22C55E; /* AppColors.domainEnvironment — green-500 */ --color-domain-safety: #0EA5E9; /* AppColors.domainSafety — sky-500 */ --color-domain-socialisation: #F59E0B; /* AppColors.domainSocialisation — amber-500 */ --color-domain-training: #EC4899; /* AppColors.domainTraining — pink-500 */ --color-domain-behaviour: #F59E0B; /* AppColors.domainBehaviour — amber-500 */ /* ========================================================================== COLORS — Semantic SOURCE: app_colors.dart ========================================================================== */ --color-error: #FF3B30; /* AppColors.error */ --color-error-bg: #FFF0F0; /* AppColors.errorBackground */ --color-success: #34C759; /* AppColors.success */ --color-warning: #FF9500; /* AppColors.warning */ /* ========================================================================== TYPOGRAPHY — Font families SOURCE: app_typography.dart (_fredoka = 'FredokaOne', _nunito = 'Nunito'). Web fallback stacks appended; actual font loading handled by hero/globals. ========================================================================== */ --font-display: 'Fredoka One', 'FredokaOne', system-ui, sans-serif; --font-body: 'Nunito', system-ui, -apple-system, sans-serif; /* ========================================================================== TYPOGRAPHY — Font sizes SOURCE: app_typography.dart fontSize values. 1:1 port. Flutter uses logical pixels; mapped directly to CSS px. ========================================================================== */ --text-display-xl: 36px; /* displayExtraLarge.fontSize */ --text-display-lg: 32px; /* displayLarge.fontSize */ --text-display-md: 24px; /* displayMedium.fontSize */ --text-display-sm: 20px; /* displaySmall.fontSize */ --text-title-lg: 22px; /* titleLarge.fontSize */ --text-title-md: 18px; /* titleMedium.fontSize */ --text-title-sm: 16px; /* titleSmall.fontSize */ --text-body-lg: 16px; /* bodyLarge.fontSize */ --text-body-md: 14px; /* bodyMedium.fontSize */ --text-body-sm: 12px; /* bodySmall.fontSize */ --text-label-lg: 14px; /* labelLarge.fontSize */ --text-label-md: 12px; /* labelMedium.fontSize */ --text-label-sm: 10px; /* labelSmall.fontSize */ /* ========================================================================== TYPOGRAPHY — Font weights SOURCE: app_typography.dart FontWeight values (w400/w600/w700/w800). ========================================================================== */ --weight-regular: 400; /* FontWeight.w400 */ --weight-semibold: 600; /* FontWeight.w600 (displayExtraLarge, titleSmall, labelMedium/Small) */ --weight-bold: 700; /* FontWeight.w700 (titleMedium, labelLarge) */ --weight-extrabold: 800; /* FontWeight.w800 (titleLarge) */ /* ========================================================================== TYPOGRAPHY — Line heights (unitless, 1:1 from Flutter height values) SOURCE: app_typography.dart "height:" fields ========================================================================== */ --leading-tight: 1.2; /* display*, labelLarge/Medium/Small */ --leading-snug: 1.3; /* displaySmall, title* */ --leading-normal: 1.5; /* body* */ /* ========================================================================== TYPOGRAPHY — Letter spacing SOURCE: app_typography.dart — no letterSpacing set on any TextStyle. DERIVED default 0 (Flutter default when unspecified). ========================================================================== */ --tracking-normal: 0; /* derived — Flutter TextStyle default */ /* ========================================================================== SPACING SOURCE: app_spacing.dart (class AppSpacing) ========================================================================== */ --space-xs: 4px; /* AppSpacing.xs */ --space-sm: 8px; /* AppSpacing.sm */ --space-md: 12px; /* AppSpacing.md */ --space-lg: 16px; /* AppSpacing.lg */ --space-xl: 24px; /* AppSpacing.xl */ --space-2xl: 32px; /* AppSpacing.xxl */ --space-3xl: 48px; /* AppSpacing.xxxl */ /* ========================================================================== BORDER RADII SOURCE: app_spacing.dart (class AppRadii). Flutter exposes sm/md/lg/xl/xxl/full. The ticket mandates --radius-sm/md/lg/xl/2xl — mapped 1:1 to AppRadii. ========================================================================== */ --radius-sm: 8px; /* AppRadii.sm */ --radius-md: 12px; /* AppRadii.md */ --radius-lg: 16px; /* AppRadii.lg */ --radius-xl: 24px; /* AppRadii.xl */ --radius-2xl: 32px; /* AppRadii.xxl */ --radius-full: 999px; /* AppRadii.full */ /* ========================================================================== ICON SIZES DERIVED: landing-page icon dimensions lifted out of landing.css literals. ========================================================================== */ --icon-size-sm: 32px; /* icon-size tokens added 2026-04-16 per Wave 0 QA F-3/F-5 */ --icon-size-md: 40px; /* icon-size tokens added 2026-04-16 per Wave 0 QA F-3/F-5 */ /* ========================================================================== BACKDROP BLUR DERIVED: sticky bar + modal backdrop blur, lifted out of landing.css literal. ========================================================================== */ --blur-backdrop: 8px; /* icon-size tokens added 2026-04-16 per Wave 0 QA F-3/F-5 */ /* ========================================================================== SHADOWS SOURCE: app_shadows.dart (class AppShadows) Flutter BoxShadow → CSS box-shadow mapping: BoxShadow(offset: Offset(x,y), blurRadius: b, color: c) → "{x}px {y}px {b}px {c}" Alpha channel is the leading two hex digits in Flutter Color(0xAARRGGBB); converted to rgba() for legibility. ========================================================================== */ /* AppShadows.soft — offset(0,4), blur 12, color 0x14000000 (alpha 0x14 = 20/255 ≈ 0.0784) */ --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); /* AppShadows.sticker — offset(0,4), blur 0, color 0x26000000 (alpha 0x26 = 38/255 ≈ 0.149) */ --shadow-sticker: 0 4px 0 rgba(0, 0, 0, 0.15); /* AppShadows.stickerBold — two stacked BoxShadows: 1) black @ 0.08, blur 12, offset(0,4) 2) black @ 0.04, blur 4, offset(0,2) */ --shadow-sticker-bold: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); /* DERIVED: additional landing-page shadow tiers not present in Flutter. Kept from ui-kit tokens.css; needed by hero/chapter cards. */ --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04); /* derived — not in app_shadows.dart */ --shadow-none: none; /* derived */ /* ========================================================================== TRANSITIONS DERIVED: not present in Flutter theme (Flutter uses its own animation controllers). Defaulted for landing page micro-interactions. ========================================================================== */ --transition-fast: 150ms ease; /* derived — landing-page default */ --transition-normal: 200ms ease; /* derived — landing-page default */ --transition-slow: 300ms ease; /* derived — landing-page default */ /* ========================================================================== Z-INDEX LAYERS Ticket-mandated tokens (sticky=10, modal-backdrop=100, modal=110) plus supporting scale carried over from ui-kit tokens.css. ========================================================================== */ --z-base: 0; /* derived */ --z-card: 1; /* derived */ --z-sticky: 10; /* ticket-mandated */ --z-nav: 50; /* derived */ --z-modal-backdrop: 100; /* ticket-mandated */ --z-modal: 110; /* ticket-mandated */ --z-toast: 200; /* derived */ } /* ========================================================================== Translation notes (for downstream agents) - FontFeature: Flutter TextStyle supports `fontFeatures` (e.g. tabular numerals). app_typography.dart does NOT set any, so no --font-feature-* token was emitted. If a future style adds one, port via CSS `font-feature-settings: "tnum" 1;` on the relevant class. - MaterialColor swatches: app_colors.dart uses only flat `Color(0xAARRGGBB)` constants — no `MaterialColor` swatches are exposed. Nothing to shade-map. - TextStyle.color: Flutter styles all bake in AppColors.onBackground as the default text color. That is intentionally NOT encoded per text-* token; downstream should set `color: var(--color-on-background)` on `body` and override where needed (same pattern as the existing ui-kit CSS). - AppColors.primaryDark vs. primary: used for pressed state only. No hover shade is defined in Flutter; hover states on web should use color-mix(in srgb, var(--color-primary) 92%, black) or pick primaryDark. ========================================================================== */