/** * PullMode Design System Variables * Single source of truth for all design tokens * Based on PullMode Brand Book v3.0 * * ╔══════════════════════════════════════════════════════════════╗ * ║ TYPOGRAPHY MIGRATION PLAN (#532) ║ * ║ ║ * ║ PRIMARY system (use these): ║ * ║ --font-size-* --font-weight-* --line-height-* ║ * ║ --letter-spacing-* --spacing-* ║ * ║ ║ * ║ DEPRECATED (migrate away from): ║ * ║ --text-* → use --font-size-* ║ * ║ --weight-* → use --font-weight-* ║ * ║ --leading-* → use --line-height-* ║ * ║ --tracking-* → use --letter-spacing-* ║ * ║ --space-* → use --spacing-* ║ * ║ ║ * ║ These duplicates exist because course redesign tokens ║ * ║ were added separately. Plan: migrate consumers file by ║ * ║ file, then remove deprecated aliases. ║ * ╚══════════════════════════════════════════════════════════════╝ */ :root { /* ═══════════════════════════════════════ COLORS - PullMode Brand Palette ═══════════════════════════════════════ */ /* Primary palette */ --color-main: #4B606E; /* Slate - buttons, headings, text */ --color-main-hover: #5A7080; /* Slate Light - hover state */ --color-main-active: #3D4F5C; /* Slate Dark - active/pressed state */ /* Background colors */ --color-background: #FFFFFF; /* Ice Blue - page background */ --color-background-rgb: 255,255,255; --color-surface: #FFFFFF; /* White - cards, forms */ --color-surface-hover: #F4F6F8; /* Light gray - hover on surfaces */ /* Text colors */ --color-text: #2D3A42; /* Dark Slate - headings, body text (WCAG AA: ~9.5:1 on white, ~6.8:1 on #D6EDFD) */ --color-text-secondary: #3D5060; /* Medium Slate - secondary body text (WCAG AA: ~6.5:1 on white, ~4.7:1 on #D6EDFD) */ --color-text-muted: #5A6B7A; /* Muted Slate - labels, placeholders (WCAG AA: 5.5:1 on white) */ --color-text-inverse: #FFFFFF; /* White - text on Slate background */ /* Border colors */ --color-border: #91AABB; /* Mist - borders, dividers */ --color-border-light: #E2E8F0; /* Light Mist - subtle borders */ --color-border-focus: #4B606E; /* Slate - focus rings */ /* Card highlight */ --color-card-highlight: #D6EDFD; /* Key takeaways / summary card background */ --color-card-highlight-hr: rgba(75, 96, 110, 0.12); /* Divider in highlight cards */ /* Selection & Interactive */ --color-selection: #C5E0F5; /* Selected state background */ /* Status colors */ --color-error: #E53E3E; --color-error-bg: #FEE2E2; --color-success: #2F855A; /* WCAG AA: 4.5:1 on white, 4.4:1 on success-bg */ --color-success-bg: #F0FFF4; --color-warning: #D69E2E; --color-warning-bg: #FFFFF0; /* Traffic light diagram colors */ --color-traffic-green: #38A169; --color-traffic-yellow: #D69E2E; --color-traffic-red: #E53E3E; /* Color opacity variants */ --color-main-10: rgba(75, 96, 110, 0.1); --color-main-20: rgba(75, 96, 110, 0.2); --color-main-40: rgba(75, 96, 110, 0.4); /* Traffic light opacity variants */ --color-traffic-green-10: rgba(34, 197, 94, 0.1); --color-traffic-green-20: rgba(34, 197, 94, 0.2); --color-traffic-yellow-10: rgba(234, 179, 8, 0.1); --color-traffic-yellow-20: rgba(234, 179, 8, 0.2); --color-traffic-red-10: rgba(239, 68, 68, 0.1); --color-traffic-red-20: rgba(239, 68, 68, 0.2); /* Overlay colors */ --color-overlay-dark: rgba(0, 0, 0, 0.4); --color-overlay-light: rgba(255, 255, 255, 0.6); /* Chat bubble colors */ --color-bubble-sender: #4A7C6F; --color-bubble-receiver: #E2E8F0; --color-bubble-receiver-text: #2D3748; /* ═══════════════════════════════════════ CONVERSATION DESIGN TOKENS ═══════════════════════════════════════ */ /* Container */ --chat-bg: #FFFFFF; --chat-radius: 20px; --chat-shadow: 0 4px 24px -4px rgba(45, 58, 66, 0.12); --chat-border: #E2E8F0; --chat-padding: 24px 20px; --chat-max-width: 480px; --chat-mockup-max-width: 400px; --chat-font: 'Inter', system-ui, -apple-system, sans-serif; /* Sender bubble (user / "Ty") */ --bubble-sender-bg: #4A7C6F; --bubble-sender-text: #FFFFFF; /* Receiver bubble (match / "Ona") */ --bubble-receiver-bg: #F8F7F4; --bubble-receiver-text: #2D3A42; --bubble-receiver-border: #E2E8F0; --bubble-receiver-shadow: 0 1px 3px rgba(75, 96, 110, 0.06); /* Bubble shared */ --bubble-radius: 20px; --bubble-tail-radius: 4px; --bubble-padding: 12px 20px; --bubble-max-width: 78%; --bubble-font-size: 15px; --bubble-font-weight: 500; --bubble-line-height: 1.5; /* Spacing */ --gap-same-sender: 4px; --gap-diff-sender: 14px; /* Timestamp */ --timestamp-color: #94A3B8; --timestamp-size: 11px; /* Annotation */ --annotation-bg: #F0FDF4; --annotation-border: #4A7C6F; --annotation-text: #2D3A42; --annotation-label-color: #4A7C6F; --annotation-size: 13px; /* Header */ --header-border: #E2E8F0; --header-label-color: #718096; --header-label-size: 11px; /* Color muted/accent (chat-specific) */ --color-chat-muted: #718096; --color-chat-accent: #4A7C6F; /* ═══════════════════════════════════════ Gamification Colors ═══════════════════════════════════════ */ /* XP display colors */ --color-xp: #5B6FD9; /* Softer blue - less "techy" than indigo */ --color-xp-glow: rgba(91, 111, 217, 0.3); /* XP animation glow effect */ /* Gamification feedback colors (opacity variants) */ --color-success-glow: rgba(22, 163, 74, 0.4); /* Success animation pulse */ --color-success-glow-light: rgba(22, 163, 74, 0.2); /* Success animation fade */ --color-xp-glow-dark: rgba(91, 111, 217, 0.4); /* XP stronger glow effect */ --color-xp-glow-light: rgba(91, 111, 217, 0.15); /* XP subtle background */ --color-xp-glow-subtle: rgba(91, 111, 217, 0.08); /* XP very subtle tint */ --color-path-node-glow: rgba(91, 155, 213, 0.2); /* Path node highlight glow */ --color-path-node-glow-strong: rgba(91, 155, 213, 0.4); /* Path node pulse glow */ --color-path-node-subtle: rgba(91, 155, 213, 0.08); /* Path node subtle background */ --color-path-node-medium: rgba(91, 155, 213, 0.15); /* Path node medium background */ --color-path-complete-subtle: rgba(124, 179, 124, 0.05); /* Completed path subtle bg */ --color-path-complete-light: rgba(124, 179, 124, 0.1); /* Completed path light bg */ --color-path-complete-medium: rgba(124, 179, 124, 0.15); /* Completed path medium bg */ --color-milestone-glow: rgba(232, 184, 109, 0.3); /* Milestone celebration glow */ --color-milestone-glow-strong: rgba(232, 184, 109, 0.5); /* Milestone intense glow */ --color-milestone-glow-light: rgba(232, 184, 109, 0.2); /* Milestone light glow */ --color-milestone-subtle: rgba(232, 184, 109, 0.1); /* Milestone subtle fade */ --color-milestone-medium: rgba(232, 184, 109, 0.4); /* Milestone medium intensity */ --color-milestone-strong: rgba(232, 184, 109, 0.6); /* Milestone strong glow */ --color-milestone-ring: rgba(232, 184, 109, 0.25); /* Milestone ring effect */ --color-milestone-shadow: rgba(232, 184, 109, 0.35); /* Milestone drop shadow */ --color-badge-shadow: rgba(0, 0, 0, 0.1); /* Badge subtle shadow */ --color-badge-shadow-medium: rgba(0, 0, 0, 0.15); /* Badge medium shadow */ --color-badge-shadow-strong: rgba(0, 0, 0, 0.2); /* Badge stronger shadow */ --color-badge-overlay: rgba(255, 255, 255, 0.8); /* Badge highlight overlay */ /* Shimmer animation colors */ --color-shimmer-50: rgba(255, 255, 255, 0.5); --color-shimmer-80: rgba(255, 255, 255, 0.8); /* Level and notification colors */ --color-level-bg: var(--color-main); /* Level badge background */ --color-toast-bg: var(--color-surface); /* Toast notification background */ --color-toast-border: var(--color-border-light); /* Toast border */ /* ═══════════════════════════════════════ Warm Accent Colors (Gamification Enhancement) ═══════════════════════════════════════ */ /* Warm accents for celebrations and encouragement */ --color-celebration: #E8B86D; /* Warm gold - milestones, level-ups, major achievements */ --color-encouragement: #F5A962; /* Soft orange - progress markers, streaks, positive feedback */ --color-warmth: #D4A574; /* Terracotta - special moments, premium features */ /* ═══════════════════════════════════════ Landing Page CTA Colors ═══════════════════════════════════════ */ /* Primary CTA (warm coral for action/conversion) */ --color-cta-primary: #E85A4F; /* Warm coral - primary CTA buttons */ --color-cta-primary-hover: #D64944; /* CTA hover state */ --color-cta-primary-active: #C43E39; /* CTA active/pressed state */ /* Light surface for mistake cards */ --color-surface-light-blue: #F7F9FC; /* Highlight accent (star ratings, badges, accents) */ --color-highlight: #F5A962; /* Soft orange - ratings, badges */ /* Section backgrounds for landing pages */ --color-urgency-bg: #FEF1F0; /* Urgency section backgrounds */ --color-warmth-bg: #FDF8F3; /* Transformation section (warm cream) */ /* ═══════════════════════════════════════ Landing Page Design System (Minimalist) ═══════════════════════════════════════ */ /* Landing primary (matches course app slate) */ --color-landing-primary: #4B606E; --color-landing-primary-hover: #5A7080; --color-landing-primary-light: rgba(75, 96, 110, 0.08); /* Landing CTA (matches existing CTA orange) */ --color-landing-cta: var(--color-cta-primary); --color-landing-cta-hover: var(--color-cta-primary-hover); --color-landing-cta-shadow: rgba(234, 88, 12, 0.30); /* Landing backgrounds */ --color-landing-bg: #FFFFFF; --color-landing-bg-alt: #F7F9FC; /* Landing text */ --color-landing-text: #272C49; --color-landing-text-secondary: #3D5278; /* Landing shadows (near-black base) */ --shadow-landing-card: 0 2px 12px rgba(26, 26, 46, 0.06); --shadow-landing-card-hover: 0 6px 24px rgba(26, 26, 46, 0.10); --shadow-landing-elevated: 0 8px 32px rgba(26, 26, 46, 0.12); /* Landing card radius (matches course --radius-lg) */ --radius-landing-card: 12px; /* Landing section padding */ --section-padding-landing: 96px; /* Landing text container (55-75 chars/line) */ --container-text-readable: 680px; /* Learning path visualization colors */ --color-path-complete: #7CB37C; /* Earthy green - completed lesson nodes */ --color-path-current: #5B9BD5; /* Soft blue - current position highlight with pulse */ --color-path-locked: #B8A99A; /* Muted warm gray - locked/unavailable items */ --color-path-connector: #C4B5A6; /* Warm gray - connecting lines between nodes */ /* ═══════════════════════════════════════ Gamification Sizing ═══════════════════════════════════════ */ /* Badge sizes for different display contexts */ --badge-size-sm: 40px; /* Small badge - inline/compact use */ --badge-size-md: 64px; /* Medium badge - list displays */ --badge-size-lg: 80px; /* Large badge - showcase/detail view */ /* Level and progress indicators */ --level-badge-size: 24px; /* Header level indicator */ --progress-ring-size: 120px; /* Dashboard progress ring */ /* Toast notification sizing */ --toast-width: 320px; /* Toast notification width */ --toast-gap: 12px; /* Gap between stacked toasts */ /* ═══════════════════════════════════════ Learning Path Sizing ═══════════════════════════════════════ */ /* Path node dimensions (8px grid) */ --path-node-size: 48px; /* Size of lesson nodes on path */ --path-node-size-sm: 40px; /* Mobile node size */ --path-milestone-size: 56px; /* Larger size for milestone nodes */ --path-icon-size: 24px; /* Icon size within nodes */ /* Path connector dimensions */ --path-connector-width: 3px; /* Width of connecting lines */ --path-connector-height: 40px; /* Height between nodes */ /* ═══════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════ */ /* Font families */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-heading: 'Archivo Black', 'Inter', sans-serif; --font-family-heading-landing: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Font sizes */ --font-size-2xs: 11px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-sm-plus: 14px; --font-size-base: 16px; --font-size-base-minus: 15px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-2xl-plus: 28px; --font-size-3xl: 30px; --font-size-4xl: 48px; /* Landing page specific typography */ --font-size-hero: 56px; /* Hero headline only */ --font-size-section: 30px; /* Section titles */ --font-size-card: 24px; /* Card titles, FAQ questions */ --font-size-subhead: 20px; /* Subheadlines */ --font-size-body-lg: 20px; /* Hero subtitle, lead text */ /* Font weights (Inter) */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Line heights */ --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* Letter spacing */ --letter-spacing-tight: -0.02em; /* Large headlines */ --letter-spacing-normal: 0em; /* Body text */ --letter-spacing-wide: 0.02em; /* Subheadings, card titles */ --letter-spacing-wider: 0.05em; /* Buttons, badges, uppercase */ /* ═══════════════════════════════════════ SPACING (8px base unit) ═══════════════════════════════════════ */ --spacing-2xs: 4px; --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; /* ═══════════════════════════════════════ BORDERS & RADIUS ═══════════════════════════════════════ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; --border-width: 2px; /* ═══════════════════════════════════════ SHADOWS (PullMode brandbook) ═══════════════════════════════════════ */ --shadow-sm: 0 1px 3px rgba(75, 96, 110, 0.06); --shadow-md: 0 2px 8px rgba(75, 96, 110, 0.08); --shadow-lg: 0 4px 16px rgba(75, 96, 110, 0.12); --shadow-hover: 0 8px 24px rgba(75, 96, 110, 0.15); --shadow-button: 0 4px 12px rgba(75, 96, 110, 0.3); /* ═══════════════════════════════════════ TRANSITIONS ═══════════════════════════════════════ */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; /* ═══════════════════════════════════════ LAYOUT ═══════════════════════════════════════ */ --container-narrow: 520px; --container-default: 640px; --container-wide: 800px; /* Landing page containers */ --container-landing: 1200px; /* Hero, Pricing grid */ --container-content: 800px; /* Body text sections */ --container-card-grid: 1000px; /* Pain points, Testimonials */ /* Section padding for landing pages */ --section-padding-lg: 80px; /* Emphasis sections (Hero, Pricing, Final CTA) */ --section-padding-md: 64px; /* Standard sections */ --section-padding-sm: 48px; /* Compact sections */ /* ═══════════════════════════════════════ Z-INDEX ═══════════════════════════════════════ */ --z-dropdown: 1100; --z-sticky: 200; --header-height: 56px; --z-modal: 300; --z-toast: 500; /* ═══════════════════════════════════════ COURSE REDESIGN TOKENS ═══════════════════════════════════════ */ /* Course accent colors */ --color-accent: #4A7C6F; --color-accent-hover: #3D6B5F; --color-accent-light: rgba(74, 124, 111, 0.08); /* Course progress */ --color-progress: #38A169; --color-progress-light: #F0FFF4; /* Course text hierarchy */ --color-text-heading: #1A202C; --color-text-body: #2D3748; --color-course-text-muted: #718096; --color-text-hint: #A0AEC0; /* Course backgrounds */ --color-bg-page: #F7F8FA; --color-bg-surface: #FFFFFF; /* Course borders */ --color-course-border: #E2E8F0; --color-border-input: #CBD5E0; /* Course status colors */ --color-info: #3182CE; --color-info-bg: #EBF8FF; --color-course-warning: #D69E2E; --color-course-warning-bg: #FFFFF0; --color-tip: #38A169; --color-tip-bg: #F0FFF4; --color-course-error-bg: #FED7D7; --color-error-text: #9B2C2C; /* Course approach indicators */ --color-approach-bad: #E53E3E; --color-approach-better: #D69E2E; --color-approach-best: #38A169; /* Course button colors */ --color-btn-primary: #2D3748; --color-btn-primary-hover: #1A202C; /* Course typography */ --font-course-sans: -apple-system, system-ui, 'Segoe UI', sans-serif; /* DEPRECATED: aliases pointing to --font-size-*. Will be removed after full migration. */ --text-xs: var(--font-size-2xs); --text-sm: var(--font-size-xs); --text-md: var(--font-size-sm); --text-base: var(--font-size-sm-plus); --text-body: var(--font-size-base-minus); --text-lg: var(--font-size-base); --text-xl: var(--font-size-lg); --text-2xl: var(--font-size-2xl); --text-3xl: var(--font-size-2xl-plus); --text-4xl: 34px; /* DEPRECATED: use --font-weight-* instead */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* DEPRECATED: use --line-height-* instead. Kept as aliases for backward compatibility. */ --leading-tight: 1.2; --leading-snug: 1.25; --leading-normal: 1.3; --leading-body: 1.45; --leading-relaxed: 1.5; --leading-loose: 1.6; /* DEPRECATED: use --letter-spacing-* instead */ --tracking-tight: -0.3px; --tracking-wide: 0.8px; --tracking-wider: 1.2px; /* DEPRECATED: use --spacing-* instead */ --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 12px; --space-5: 14px; --space-6: 16px; --space-7: 18px; --space-8: 20px; --space-9: 24px; --space-10: 28px; --space-11: 32px; --space-12: 40px; /* Course border radius */ --radius-course-sm: 2px; --radius-course-md: 6px; --radius-course-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-pill: 24px; --radius-course-full: 50%; /* ═══════════════════════════════════════ MODULE ACCENT COLORS ═══════════════════════════════════════ */ --color-module-fundamenty: #4A7C6F; --color-module-temperatura: #E07C5A; --color-module-toolkit: #5B8DEF; --color-module-zaawansowane: #C4973B; /* ═══════════════════════════════════════ MASQUERADE ═══════════════════════════════════════ */ /* Banner height - will be set by JS when masquerade is active */ --masquerade-banner-height: 0px; } /* ═══════════════════════════════════════ LANDING PAGE DARK THEME Scoped to [data-landing-theme="dark"] ═══════════════════════════════════════ */ [data-landing-theme="dark"] { /* ── Primary ── */ --ld-primary: #6C5CE7; --ld-primary-hover: #7C6FF0; --ld-primary-active: #5A4BD4; --ld-primary-subtle: rgba(108, 92, 231, 0.10); /* ── Secondary ── */ --ld-secondary: #00D2FF; --ld-secondary-subtle: rgba(0, 210, 255, 0.10); /* ── Backgrounds ── */ --ld-bg-body: #0A0A0F; --ld-bg-alt: #0E0E16; --ld-bg-card: #12121A; --ld-bg-input: #1A1A25; --ld-bg-overlay: rgba(0, 0, 0, 0.80); /* ── Text ── */ --ld-text-primary: #F5F5F7; --ld-text-body: #B8B8CC; --ld-text-muted: #8A8A9F; --ld-text-accent: #6C5CE7; --ld-text-on-primary: #FFFFFF; /* ── Borders (elevation via borders, not shadows) ── */ --ld-border-subtle: rgba(255, 255, 255, 0.03); --ld-border-card: rgba(255, 255, 255, 0.06); --ld-border-hover: rgba(255, 255, 255, 0.10); --ld-border-highlight: rgba(108, 92, 231, 0.30); /* ── Status ── */ --ld-success: #00C48C; --ld-warning: #FFB800; --ld-error: #FF4757; --ld-error-subtle: rgba(255, 71, 87, 0.10); --ld-error-very-subtle: rgba(255, 71, 87, 0.06); /* ── Chat bubbles ── */ --ld-bubble-sender: slategray; --ld-bubble-sender-text: #FFFFFF; --ld-bubble-receiver: #1E1E2E; --ld-bubble-receiver-text: #F5F5F7; /* ── Gradients ── */ --ld-gradient-hero: linear-gradient(135deg, #6C5CE7, #00D2FF); --ld-gradient-cta-glow: radial-gradient(ellipse, rgba(108, 92, 231, 0.25), transparent); --ld-gradient-border: linear-gradient(135deg, rgba(108, 92, 231, 0.25), rgba(0, 210, 255, 0.25)); --ld-gradient-separator: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%); /* ── Glow/Shadow (dark mode elevation) ── */ --ld-glow-primary: 0 0 60px rgba(108, 92, 231, 0.08); --ld-glow-highlight: 0 0 60px rgba(108, 92, 231, 0.15); --ld-shadow-button-hover: 0 4px 20px rgba(108, 92, 231, 0.30); /* ── Typography ── */ --ld-font-heading: 'Satoshi', system-ui, -apple-system, sans-serif; --ld-font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Hero font size — fluid */ --ld-hero-size: clamp(36px, 6vw, 60px); --ld-h2-size: clamp(28px, 4vw, 36px); --ld-h3-size: clamp(22px, 3vw, 30px); --ld-h4-size: clamp(18px, 2.5vw, 24px); --ld-body-size: 16px; --ld-lead-size: 18px; --ld-overline-size: 12px; --ld-price-size: clamp(40px, 5vw, 56px); /* ── Spacing ── */ --ld-section-py: 96px; --ld-section-px: 20px; --ld-hero-pt: 120px; /* ── Layout ── */ --ld-max-content: 1120px; --ld-max-narrow: 720px; --ld-max-hero: 960px; /* ── Radius ── */ --ld-radius-sm: 6px; --ld-radius-md: 12px; --ld-radius-lg: 16px; --ld-radius-phone: 24px; --ld-radius-pill: 9999px; /* ── Transitions ── */ --ld-transition-fast: 150ms ease; --ld-transition-normal: 200ms ease; --ld-transition-slow: 300ms ease; /* ── Legacy variable overrides ── */ /* Override existing landing vars so components auto-adapt */ --color-landing-bg: var(--ld-bg-body); --color-landing-bg-alt: var(--ld-bg-alt); --color-landing-text: var(--ld-text-primary); --color-landing-text-secondary: var(--ld-text-body); --color-landing-primary: var(--ld-primary); --color-landing-primary-hover: var(--ld-primary-hover); --color-landing-primary-light: var(--ld-primary-subtle); --color-landing-cta: var(--ld-primary); --color-landing-cta-hover: var(--ld-primary-hover); --color-surface: var(--ld-bg-card); --color-surface-hover: var(--ld-bg-input); --color-text: var(--ld-text-body); --color-text-muted: var(--ld-text-muted); --color-text-inverse: var(--ld-text-on-primary); --color-border-light: var(--ld-border-card); --color-error: var(--ld-error); --color-success: var(--ld-success); --color-selection: rgba(108, 92, 231, 0.20); --shadow-landing-card: var(--ld-glow-primary); --shadow-landing-card-hover: var(--ld-glow-highlight); --radius-landing-card: var(--ld-radius-md); --font-family-heading: var(--ld-font-heading); --container-landing: var(--ld-max-content); --container-content: var(--ld-max-narrow); --container-card-grid: var(--ld-max-content); --container-text-readable: 680px; --section-padding-lg: var(--ld-section-py); --section-padding-md: 64px; /* ── NewsletterSection card surfaces ── */ /* Were missing from dark landing theme, causing bright blue cards on dark BG */ --color-card-highlight: var(--ld-bg-card); --color-border: var(--ld-border-card); } /* ── Landing dark responsive ── */ @media (max-width: 768px) { [data-landing-theme="dark"] { --ld-section-py: 64px; --ld-hero-pt: 80px; } } /* header-height is now 56px globally — no mobile override needed */ /* ═══════════════════════════════════════ RESPONSIVE TYPOGRAPHY ═══════════════════════════════════════ */ /* Responsive typography - tablet */ @media (max-width: 768px) { :root { --font-size-xs: 14px; --font-size-sm: 14px; --font-size-4xl: 36px; --font-size-3xl: 28px; --font-size-hero: 36px; --font-size-section: 28px; --font-size-card: 20px; --font-size-body-lg: 18px; --section-padding-lg: 48px; --section-padding-md: 40px; --section-padding-sm: 32px; --section-padding-landing: 56px; } } /* Responsive typography - mobile */ @media (max-width: 480px) { :root { --font-size-4xl: 28px; --font-size-3xl: 24px; } } /* ═══════════════════════════════════════════════════════════════ DARK MODE — "Midnight Teal" Issue #525 | Winner from expert panel evaluation All existing var(--color-*) references will auto-adapt. ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ────────────────────────────────────────── CORE PALETTE ────────────────────────────────────────── */ --color-main: #8FA8B8; --color-main-hover: #A3B9C7; --color-main-active: #7A95A6; --color-background: #0F1419; --color-background-rgb: 15,20,25; --color-surface: #161D23; --color-surface-hover: #1C252D; --color-text: #E2E8ED; --color-text-secondary: #B0BEC5; --color-text-muted: #809AAA; --color-text-inverse: #0F1419; --color-border: #4A5A66; --color-border-light: #3A4A55; --color-border-focus: #5BA89A; --color-selection: rgba(91, 168, 154, 0.25); /* ────────────────────────────────────────── FORM CONTROLS — dark mode select/option fix Native