/* ============================================================================ LUX DESIGN SYSTEM — CSS Framework A comprehensive design system inspired by Apple's Human Interface Guidelines. Version 2.0 | 2026 ============================================================================ */ /* ============================================================================ 1. COLOR SYSTEM LUX'S color palette: semantic, accessible, and adaptive (light/dark). ============================================================================ */ :root { /* --------------------------------------------------------------------------- 1a. Zivvy Brand Color Scales (Primary, Secondary, Tertiary) --------------------------------------------------------------------------- */ /* PRIMARY: Deep Purple - Brand, CTAs (50-950 scale) */ --primary-50: hsl(270, 50%, 96%); --primary-100: hsl(271, 51%, 92%); --primary-200: hsl(270, 49%, 83%); --primary-300: hsl(271, 47%, 71%); --primary-400: hsl(271, 47%, 57%); --primary-500: hsl(272, 54%, 45%); --primary-600: hsl(269, 69%, 37%); --primary-700: hsl(269, 70%, 30%); --primary-800: hsl(269, 70%, 23%); --primary-900: hsl(268, 70%, 16%); --primary-950: hsl(267, 70%, 9%); /* SECONDARY: Violet-Blue - Links, Info (50-950 scale) */ --secondary-50: hsl(226, 76%, 97%); --secondary-100: hsl(227, 77%, 93%); --secondary-200: hsl(226, 77%, 86%); --secondary-300: hsl(229, 72%, 77%); --secondary-400: hsl(230, 69%, 67%); --secondary-500: hsl(231, 65%, 57%); --secondary-600: hsl(232, 54%, 49%); --secondary-700: hsl(233, 54%, 39%); --secondary-800: hsl(232, 53%, 29%); --secondary-900: hsl(232, 53%, 20%); --secondary-950: hsl(233, 55%, 12%); /* TERTIARY: Muted Gold - Achievements (50-950 scale) */ --tertiary-50: hsl(46, 76%, 97%); --tertiary-100: hsl(46, 75%, 92%); --tertiary-200: hsl(46, 74%, 83%); --tertiary-300: hsl(44, 72%, 72%); --tertiary-400: hsl(44, 70%, 59%); --tertiary-500: hsl(43, 80%, 46%); --tertiary-600: hsl(43, 80%, 39%); --tertiary-700: hsl(43, 79%, 31%); --tertiary-800: hsl(43, 79%, 22%); --tertiary-900: hsl(44, 79%, 15%); --tertiary-950: hsl(44, 77%, 8%); /* --------------------------------------------------------------------------- 1b. Core Apple Brand Colors --------------------------------------------------------------------------- */ --apple-blue: hsl(211, 100%, 50%); --apple-green: hsl(135, 59%, 49%); --apple-indigo: hsl(241, 61%, 59%); --apple-orange: hsl(35, 100%, 50%); --apple-pink: hsl(349, 100%, 59%); --apple-purple: hsl(280, 68%, 60%); --apple-red: hsl(3, 100%, 59%); --apple-teal: hsl(199, 94%, 67%); --apple-yellow: hsl(48, 100%, 50%); --apple-mint: hsl(177, 100%, 39%); --apple-cyan: hsl(199, 78%, 55%); --apple-brown: hsl(34, 27%, 50%); /* --------------------------------------------------------------------------- 1c. Grayscale System --------------------------------------------------------------------------- */ --gray-1: hsl(240, 2%, 57%); --gray-2: hsl(240, 3%, 69%); --gray-3: hsl(240, 5%, 79%); --gray-4: hsl(240, 6%, 83%); --gray-5: hsl(240, 11%, 91%); --gray-6: hsl(240, 24%, 96%); /* --------------------------------------------------------------------------- 1c. Semantic Colors — Light Mode (default) --------------------------------------------------------------------------- */ --color-label: hsl(0, 0%, 0%); --color-label-secondary: hsl(240, 6%, 25%, 0.60); --color-label-tertiary: hsl(240, 6%, 25%, 0.30); --color-label-quaternary: hsl(240, 6%, 25%, 0.18); --color-fill: hsl(240, 3%, 49%, 0.20); --color-fill-secondary: hsl(240, 3%, 49%, 0.16); --color-fill-tertiary: hsl(240, 4%, 48%, 0.12); --color-fill-quaternary: hsl(240, 5%, 48%, 0.08); --color-background: hsl(0, 0%, 100%); --color-background-secondary: hsl(240, 24%, 96%); --color-background-tertiary: hsl(0, 0%, 100%); --color-grouped-background: hsl(240, 24%, 96%); --color-grouped-background-secondary: hsl(0, 0%, 100%); --color-grouped-background-tertiary: hsl(240, 24%, 96%); --color-separator: hsl(240, 6%, 25%, 0.29); --color-separator-opaque: hsl(240, 2%, 78%); --color-link: var(--apple-blue); --color-placeholder: hsl(240, 6%, 25%, 0.30); /* --------------------------------------------------------------------------- 1d. Success/Warning/Danger Scales (Full 11-shade for alerts/badges/states) --------------------------------------------------------------------------- */ /* SUCCESS Scale - Green for positive states */ --success-50: hsl(152, 81%, 96%); --success-100: hsl(149, 80%, 90%); --success-200: hsl(152, 76%, 80%); --success-300: hsl(156, 72%, 67%); --success-400: hsl(119, 49%, 57%); --success-500: hsl(122, 39%, 49%); --success-600: hsl(161, 94%, 30%); --success-700: hsl(163, 94%, 24%); --success-800: hsl(163, 88%, 20%); --success-900: hsl(164, 86%, 16%); --success-950: hsl(166, 85%, 10%); /* WARNING Scale - Orange for caution states */ --warning-50: hsl(48, 100%, 96%); --warning-100: hsl(48, 96%, 89%); --warning-200: hsl(48, 97%, 77%); --warning-300: hsl(46, 96%, 64%); --warning-400: hsl(27, 96%, 61%); --warning-500: hsl(25, 95%, 53%); --warning-600: hsl(32, 95%, 44%); --warning-700: hsl(26, 90%, 37%); --warning-800: hsl(23, 82%, 31%); --warning-900: hsl(22, 78%, 26%); --warning-950: hsl(21, 77%, 17%); /* DANGER Scale - Red for error/destructive states */ --danger-50: hsl(0, 86%, 97%); --danger-100: hsl(0, 93%, 94%); --danger-200: hsl(0, 96%, 89%); --danger-300: hsl(0, 94%, 82%); --danger-400: hsl(0, 91%, 71%); --danger-500: hsl(1, 77%, 55%); --danger-600: hsl(0, 72%, 51%); --danger-700: hsl(0, 74%, 42%); --danger-800: hsl(0, 70%, 35%); --danger-900: hsl(0, 66%, 29%); --danger-950: hsl(0, 63%, 31%); /* --------------------------------------------------------------------------- 1e. Psychological Color System (Behavioral Design Triggers) --------------------------------------------------------------------------- */ --psychology-danger: hsl(6, 100%, 71%); --psychology-warning: hsl(37, 86%, 50%); --psychology-success: hsl(173, 100%, 38%); --psychology-premium: hsl(283, 37%, 52%); --psychology-achievement: hsl(51, 100%, 50%); --psychology-competitor: hsl(0, 100%, 63%); /* --------------------------------------------------------------------------- 1f. Emotional States (Design for Emotional Impact) --------------------------------------------------------------------------- */ --calm-primary: hsl(264, 32%, 57%); --calm-light: hsl(274, 41%, 97%); --info-primary: hsl(223, 47%, 57%); --info-light: hsl(216, 50%, 96%); --attention-primary: hsl(42, 63%, 48%); --attention-light: hsl(44, 60%, 95%); --urgent-primary: hsl(0, 64%, 58%); --urgent-light: hsl(5, 52%, 96%); --celebration-primary: hsl(123, 36%, 48%); --celebration-light: hsl(120, 33%, 96%); /* Legacy emotional state aliases */ --success-primary: var(--celebration-primary); --success-light: var(--celebration-light); --warning-primary: var(--attention-primary); --warning-light: var(--attention-light); /* --------------------------------------------------------------------------- 1g. Accent / Interactive Colors (Apple HIG) --------------------------------------------------------------------------- */ --color-accent: var(--apple-blue); --color-accent-hover: hsl(211, 100%, 46%); --color-accent-active: hsl(211, 100%, 41%); --color-destructive: var(--apple-red); --color-success: var(--apple-green); --color-warning: var(--apple-orange); --color-info: var(--apple-teal); /* --------------------------------------------------------------------------- 1e. Surface & Material Colors (Vibrancy / Blur layers) --------------------------------------------------------------------------- */ --material-ultra-thin: hsl(0, 0%, 100%, 0.30); --material-thin: hsl(0, 0%, 100%, 0.50); --material-regular: hsl(0, 0%, 100%, 0.72); --material-thick: hsl(0, 0%, 100%, 0.85); --material-chrome: hsl(0, 0%, 100%, 0.92); /* --------------------------------------------------------------------------- 1f. Gradient Presets --------------------------------------------------------------------------- */ --gradient-hero: linear-gradient(180deg, hsl(240, 33%, 99%) 0%, hsl(240, 11%, 96%) 100%); --gradient-card: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(240, 20%, 98%) 100%); --gradient-cta: linear-gradient(135deg, hsl(211, 100%, 50%) 0%, hsl(241, 61%, 59%) 100%); --gradient-sunset: linear-gradient(135deg, hsl(35, 100%, 50%) 0%, hsl(349, 100%, 59%) 100%); --gradient-midnight: linear-gradient(180deg, hsl(240, 3%, 12%) 0%, hsl(0, 0%, 0%) 100%); --gradient-ocean: linear-gradient(135deg, hsl(199, 94%, 67%) 0%, hsl(211, 100%, 50%) 100%); --gradient-aurora: linear-gradient(135deg, hsl(241, 61%, 59%) 0%, hsl(280, 68%, 60%) 50%, hsl(349, 100%, 59%) 100%); /* ============================================================================ 2. TYPOGRAPHY SYSTEM Apple uses SF Pro for all UI. We define a full type scale. ============================================================================ */ /* --------------------------------------------------------------------------- 2a. Font Families --------------------------------------------------------------------------- */ --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Helvetica", "Arial", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Helvetica", "Arial", system-ui, sans-serif; --font-rounded: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: "SF Mono", ui-monospace, "Menlo", "Monaco", "Cascadia Mono", "Consolas", monospace; --font-serif: "New York", "Iowan Old Style", "Apple Garamond", "Baskerville", "Georgia", serif; /* --------------------------------------------------------------------------- 2b. Font Weights --------------------------------------------------------------------------- */ --weight-ultralight: 100; --weight-thin: 200; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --weight-black: 900; /* --------------------------------------------------------------------------- 2c. Type Scale — Size / Line-Height / Letter-Spacing / Weight Apple-accurate sizing from HIG --------------------------------------------------------------------------- */ /* Marketing / Hero Headlines */ --text-hero-size: 96px; --text-hero-line: 1.03; --text-hero-tracking: -0.015em; --text-hero-weight: var(--weight-bold); --text-display-size: 80px; --text-display-line: 1.05; --text-display-tracking: -0.015em; --text-display-weight: var(--weight-bold); --text-headline-1-size: 64px; --text-headline-1-line: 1.0625; --text-headline-1-tracking: -0.012em; --text-headline-1-weight: var(--weight-semibold); --text-headline-2-size: 48px; --text-headline-2-line: 1.083; --text-headline-2-tracking: -0.01em; --text-headline-2-weight: var(--weight-semibold); --text-headline-3-size: 40px; --text-headline-3-line: 1.1; --text-headline-3-tracking: -0.008em; --text-headline-3-weight: var(--weight-semibold); /* Editorial / Section Headlines */ --text-eyebrow-size: 12px; --text-eyebrow-line: 1.33; --text-eyebrow-tracking: 0.08em; --text-eyebrow-weight: var(--weight-semibold); /* UI Type Scale */ --text-title-1-size: 28px; --text-title-1-line: 1.21; --text-title-1-tracking: 0.007em; --text-title-1-weight: var(--weight-bold); --text-title-2-size: 22px; --text-title-2-line: 1.27; --text-title-2-tracking: -0.005em; --text-title-2-weight: var(--weight-bold); --text-title-3-size: 20px; --text-title-3-line: 1.25; --text-title-3-tracking: -0.005em; --text-title-3-weight: var(--weight-semibold); --text-body-size: 17px; --text-body-line: 1.47; --text-body-tracking: -0.022em; --text-body-weight: var(--weight-regular); --text-body-large-size: 21px; --text-body-large-line: 1.381; --text-body-large-tracking: 0.011em; --text-body-large-weight: var(--weight-regular); --text-callout-size: 16px; --text-callout-line: 1.375; --text-callout-tracking: -0.02em; --text-callout-weight: var(--weight-regular); --text-subheadline-size: 15px; --text-subheadline-line: 1.33; --text-subheadline-tracking:-0.016em; --text-subheadline-weight: var(--weight-regular); --text-footnote-size: 13px; --text-footnote-line: 1.38; --text-footnote-tracking: -0.006em; --text-footnote-weight: var(--weight-regular); --text-caption-1-size: 12px; --text-caption-1-line: 1.33; --text-caption-1-tracking: 0em; --text-caption-1-weight: var(--weight-regular); --text-caption-2-size: 11px; --text-caption-2-line: 1.27; --text-caption-2-tracking: 0.01em; --text-caption-2-weight: var(--weight-regular); /* ============================================================================ 3. SPACING SYSTEM 8pt base grid. Apple uses multiples of 4 and 8 extensively. ============================================================================ */ --space-0: 0; --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-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Semantic Spacing */ --spacing-section-gap: var(--space-20); /* Between major sections */ --spacing-component-gap: var(--space-8); /* Between components */ --spacing-element-gap: var(--space-4); /* Between small elements */ --spacing-inline-gap: var(--space-2); /* Inline elements */ --spacing-text-gap: var(--space-3); /* Between text blocks */ /* ============================================================================ 4. LAYOUT SYSTEM Page widths, margins, gutters, and column grid. ============================================================================ */ /* --------------------------------------------------------------------------- 4a. Page Container Widths --------------------------------------------------------------------------- */ --layout-max-width: 980px; /* Standard apple.com content width */ --layout-max-width-wide: 1120px; /* Wide content areas */ --layout-max-width-narrow: 692px; /* Reading / editorial width */ --layout-max-width-hero: 1440px; /* Full-bleed hero sections */ --layout-max-width-compact: 500px; /* Forms, dialogs */ /* --------------------------------------------------------------------------- 4b. Page Margins (responsive) --------------------------------------------------------------------------- */ --layout-margin-desktop: var(--space-16); /* 64px */ --layout-margin-tablet: var(--space-10); /* 40px */ --layout-margin-mobile: var(--space-5); /* 20px */ --layout-margin: var(--layout-margin-desktop); /* --------------------------------------------------------------------------- 4c. Grid --------------------------------------------------------------------------- */ --grid-columns: 12; --grid-gutter: var(--space-5); /* 20px column gap */ --grid-gutter-compact: var(--space-4); /* 16px for tight layouts */ --grid-gutter-wide: var(--space-8); /* 32px for wide layouts */ /* --------------------------------------------------------------------------- 4d. Section Padding (vertical rhythm) --------------------------------------------------------------------------- */ --section-padding-xl: 120px; --section-padding-lg: 100px; --section-padding-md: 80px; --section-padding-sm: 60px; --section-padding-xs: 40px; /* --------------------------------------------------------------------------- 4e. Touch Targets (Accessibility - proper touch target sizing) --------------------------------------------------------------------------- */ --touch-desktop: 44px; --touch-mobile: 56px; /* --------------------------------------------------------------------------- 4f. Breakpoints (as reference — use in @media) --------------------------------------------------------------------------- */ /* --bp-mobile: 375px (iPhone SE) --bp-mobile-lg: 428px (iPhone Pro Max) --bp-tablet: 744px (iPad Mini) --bp-tablet-lg: 1024px (iPad Pro) --bp-desktop: 1280px --bp-desktop-lg: 1440px --bp-desktop-xl: 1680px */ /* ============================================================================ 5. BORDER RADIUS Apple's radius system — from tight UI controls to large cards. ============================================================================ */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 28px; --radius-4xl: 36px; --radius-full: 9999px; /* Semantic Radius */ --radius-button: var(--radius-full); /* Pill-shaped buttons */ --radius-button-rect: var(--radius-md); /* Rectangular buttons */ --radius-card: var(--radius-xl); /* Content cards */ --radius-card-large: var(--radius-3xl); /* Hero cards */ --radius-input: var(--radius-sm); /* Form inputs */ --radius-modal: var(--radius-2xl); /* Modals / sheets */ --radius-chip: var(--radius-full); /* Tags / chips */ --radius-thumbnail: var(--radius-md); /* Image thumbnails */ --radius-avatar: var(--radius-full); /* Profile images */ --radius-tooltip: var(--radius-sm); /* Tooltips */ /* Squircle Radius (iOS-style rounded corners) */ --radius-squircle-sm: 12px; --radius-squircle: 20px; --radius-squircle-lg: 28px; /* ============================================================================ 6. ELEVATION / SHADOW SYSTEM Apple's layered shadow approach: tight + ambient. ============================================================================ */ /* No elevation */ --shadow-none: none; /* Subtle lift — cards at rest */ --shadow-xs: 0 0.5px 1px hsl(0, 0%, 0%, 0.04), 0 1px 3px hsl(0, 0%, 0%, 0.03); /* Default card shadow */ --shadow-sm: 0 1px 2px hsl(0, 0%, 0%, 0.06), 0 2px 8px hsl(0, 0%, 0%, 0.04); /* Raised components — buttons, interactive */ --shadow-md: 0 2px 4px hsl(0, 0%, 0%, 0.06), 0 4px 16px hsl(0, 0%, 0%, 0.06); /* Elevated — dropdown menus, popovers */ --shadow-lg: 0 4px 8px hsl(0, 0%, 0%, 0.06), 0 8px 24px hsl(0, 0%, 0%, 0.08); /* High elevation — modals, dialogs */ --shadow-xl: 0 8px 16px hsl(0, 0%, 0%, 0.08), 0 16px 48px hsl(0, 0%, 0%, 0.12); /* Maximum elevation — spotlight, sheets */ --shadow-2xl: 0 12px 24px hsl(0, 0%, 0%, 0.10), 0 24px 80px hsl(0, 0%, 0%, 0.16); /* Colored glow shadows (for colored buttons/cards) */ --shadow-blue-glow: 0 4px 16px hsl(211, 100%, 50%, 0.30); --shadow-purple-glow: 0 4px 16px hsl(280, 68%, 60%, 0.30); --shadow-red-glow: 0 4px 16px hsl(3, 100%, 59%, 0.30); --shadow-green-glow: 0 4px 16px hsl(135, 59%, 49%, 0.30); /* Inner shadow — pressed / inset states */ --shadow-inset: inset 0 1px 3px hsl(0, 0%, 0%, 0.08); --shadow-inset-strong: inset 0 2px 6px hsl(0, 0%, 0%, 0.12); /* ============================================================================ 7. ANIMATION & MOTION Apple's signature spring-like, responsive motion. ============================================================================ */ /* --------------------------------------------------------------------------- 7a. Easing Curves --------------------------------------------------------------------------- */ --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1.0); --ease-in: cubic-bezier(0.42, 0, 1.0, 1.0); --ease-out: cubic-bezier(0, 0, 0.58, 1.0); --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0); --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* Apple's signature spring */ --ease-spring-delightful: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Zivvy spring - delightful overshoot */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0, 1); /* macOS-style smooth */ --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* Quick, responsive */ /* --------------------------------------------------------------------------- 7b. Durations --------------------------------------------------------------------------- */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-moderate: 400ms; --duration-slow: 500ms; --duration-slower: 700ms; --duration-celebration: 600ms; /* For celebration moments */ --duration-page: 1000ms; /* Timing aliases (Zivvy naming convention) */ --timing-fast: var(--duration-fast); --timing-base: var(--duration-normal); --timing-slow: var(--duration-slow); --timing-celebration: var(--duration-celebration); /* --------------------------------------------------------------------------- 7c. Semantic Transitions --------------------------------------------------------------------------- */ --transition-color: color var(--duration-fast) var(--ease-default); --transition-bg: background-color var(--duration-fast) var(--ease-default); --transition-shadow: box-shadow var(--duration-normal) var(--ease-default); --transition-transform: transform var(--duration-normal) var(--ease-spring); --transition-opacity: opacity var(--duration-normal) var(--ease-default); --transition-all: all var(--duration-normal) var(--ease-spring); --transition-button: all var(--duration-fast) var(--ease-smooth); --transition-card: all var(--duration-normal) var(--ease-spring); --transition-page: all var(--duration-page) var(--ease-smooth); /* ============================================================================ 8. BORDERS ============================================================================ */ --border-width-thin: 0.5px; --border-width-default: 1px; --border-width-thick: 2px; --border-color: var(--color-separator); --border-color-opaque: var(--color-separator-opaque); --border-default: var(--border-width-default) solid var(--border-color); --border-subtle: var(--border-width-thin) solid var(--border-color); /* ============================================================================ 9. Z-INDEX SCALE ============================================================================ */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; --z-max: 9999; /* ============================================================================ 10. SIZING — Components ============================================================================ */ --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; --size-icon-xl: 28px; --size-icon-2xl: 32px; --size-icon-3xl: 48px; --size-avatar-sm: 28px; --size-avatar-md: 40px; --size-avatar-lg: 64px; --size-avatar-xl: 96px; --size-touch-target: 44px; /* Apple minimum touch target */ --size-button-height: 50px; /* Standard CTA height */ --size-button-height-sm: 36px; --size-button-height-lg: 56px; --size-input-height: 44px; --size-nav-height: 52px; --size-nav-height-compact: 44px; /* ============================================================================ 11. BLUR / BACKDROP FILTERS ============================================================================ */ --blur-none: 0; --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; --blur-xl: 40px; --blur-2xl: 64px; --blur-chrome: 20px; /* Standard nav / toolbar blur */ --backdrop-nav: saturate(180%) blur(var(--blur-chrome)); --backdrop-modal: saturate(150%) blur(var(--blur-xl)); --backdrop-sheet: saturate(120%) blur(var(--blur-lg)); } /* ============================================================================ 12. DARK MODE OVERRIDES ============================================================================ */ @media (prefers-color-scheme: dark) { :root { /* Dark mode brand colors (adjusted vibrancy) */ --apple-blue: hsl(210, 100%, 52%); --apple-green: hsl(135, 64%, 50%); --apple-indigo: hsl(241, 73%, 63%); --apple-orange: hsl(36, 100%, 52%); --apple-pink: hsl(348, 100%, 61%); --apple-purple: hsl(280, 85%, 65%); --apple-red: hsl(3, 100%, 61%); --apple-teal: hsl(197, 100%, 70%); --apple-yellow: hsl(50, 100%, 52%); --apple-mint: hsl(177, 56%, 62%); --apple-cyan: hsl(189, 72%, 56%); --apple-brown: hsl(34, 29%, 54%); /* Dark grayscale */ --gray-1: hsl(240, 2%, 57%); --gray-2: hsl(240, 1%, 39%); --gray-3: hsl(240, 1%, 29%); --gray-4: hsl(240, 2%, 23%); --gray-5: hsl(240, 2%, 18%); --gray-6: hsl(240, 3%, 11%); /* Dark semantic labels */ --color-label: hsl(0, 0%, 100%); --color-label-secondary: hsl(240, 33%, 94%, 0.60); --color-label-tertiary: hsl(240, 33%, 94%, 0.30); --color-label-quaternary: hsl(240, 33%, 94%, 0.18); /* Dark fills */ --color-fill: hsl(240, 3%, 49%, 0.36); --color-fill-secondary: hsl(240, 3%, 49%, 0.32); --color-fill-tertiary: hsl(240, 4%, 48%, 0.24); --color-fill-quaternary: hsl(240, 5%, 48%, 0.18); /* Dark backgrounds */ --color-background: hsl(0, 0%, 0%); --color-background-secondary: hsl(240, 3%, 11%); --color-background-tertiary: hsl(240, 2%, 18%); --color-grouped-background: hsl(0, 0%, 0%); --color-grouped-background-secondary: hsl(240, 3%, 11%); --color-grouped-background-tertiary: hsl(240, 2%, 18%); /* Dark separators */ --color-separator: hsl(240, 2%, 34%, 0.65); --color-separator-opaque: hsl(240, 2%, 22%); /* Dark surfaces */ --material-ultra-thin: hsl(0, 0%, 12%, 0.40); --material-thin: hsl(0, 0%, 12%, 0.55); --material-regular: hsl(0, 0%, 12%, 0.72); --material-thick: hsl(0, 0%, 12%, 0.85); --material-chrome: hsl(0, 0%, 12%, 0.92); /* Dark gradients */ --gradient-hero: linear-gradient(180deg, hsl(240, 3%, 12%) 0%, hsl(0, 0%, 0%) 100%); --gradient-card: linear-gradient(180deg, hsl(240, 3%, 11%) 0%, hsl(0, 0%, 8%) 100%); /* Dark shadows (more subtle) */ --shadow-xs: 0 0.5px 1px hsl(0, 0%, 0%, 0.20), 0 1px 3px hsl(0, 0%, 0%, 0.15); --shadow-sm: 0 1px 2px hsl(0, 0%, 0%, 0.25), 0 2px 8px hsl(0, 0%, 0%, 0.20); --shadow-md: 0 2px 4px hsl(0, 0%, 0%, 0.30), 0 4px 16px hsl(0, 0%, 0%, 0.25); --shadow-lg: 0 4px 8px hsl(0, 0%, 0%, 0.30), 0 8px 24px hsl(0, 0%, 0%, 0.30); --shadow-xl: 0 8px 16px hsl(0, 0%, 0%, 0.35), 0 16px 48px hsl(0, 0%, 0%, 0.40); --shadow-2xl: 0 12px 24px hsl(0, 0%, 0%, 0.40), 0 24px 80px hsl(0, 0%, 0%, 0.50); } } /* Theme class overrides (manual toggle) */ [data-theme="dark"] { /* Same as @media dark above — copy for JS toggling */ --apple-blue: hsl(210, 100%, 52%); --apple-green: hsl(135, 64%, 50%); --apple-indigo: hsl(241, 73%, 63%); --apple-orange: hsl(36, 100%, 52%); --apple-pink: hsl(348, 100%, 61%); --apple-purple: hsl(280, 85%, 65%); --apple-red: hsl(3, 100%, 61%); --apple-teal: hsl(197, 100%, 70%); --apple-yellow: hsl(50, 100%, 52%); --apple-mint: hsl(177, 56%, 62%); --apple-cyan: hsl(189, 72%, 56%); --color-label: hsl(0, 0%, 100%); --color-label-secondary: hsl(240, 33%, 94%, 0.60); --color-background: hsl(0, 0%, 0%); --color-background-secondary: hsl(240, 3%, 11%); --color-background-tertiary: hsl(240, 2%, 18%); --color-separator: hsl(240, 2%, 34%, 0.65); --gradient-hero: linear-gradient(180deg, hsl(240, 3%, 12%) 0%, hsl(0, 0%, 0%) 100%); --gradient-card: linear-gradient(180deg, hsl(240, 3%, 11%) 0%, hsl(0, 0%, 8%) 100%); } /* ============================================================================ 13. BASE RESET & GLOBALS ============================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-system); font-size: var(--text-body-size); line-height: var(--text-body-line); letter-spacing: var(--text-body-tracking); font-weight: var(--text-body-weight); color: var(--color-label); background-color: var(--color-background); } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: var(--color-link); text-decoration: none; transition: var(--transition-color); } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ============================================================================ 14. TYPOGRAPHY UTILITY CLASSES ============================================================================ */ .text-hero { font-family: var(--font-display); font-size: var(--text-hero-size); line-height: var(--text-hero-line); letter-spacing: var(--text-hero-tracking); font-weight: var(--text-hero-weight); } .text-display { font-family: var(--font-display); font-size: var(--text-display-size); line-height: var(--text-display-line); letter-spacing: var(--text-display-tracking); font-weight: var(--text-display-weight); } .text-headline-1 { font-family: var(--font-display); font-size: var(--text-headline-1-size); line-height: var(--text-headline-1-line); letter-spacing: var(--text-headline-1-tracking); font-weight: var(--text-headline-1-weight); } .text-headline-2 { font-family: var(--font-display); font-size: var(--text-headline-2-size); line-height: var(--text-headline-2-line); letter-spacing: var(--text-headline-2-tracking); font-weight: var(--text-headline-2-weight); } .text-headline-3 { font-family: var(--font-display); font-size: var(--text-headline-3-size); line-height: var(--text-headline-3-line); letter-spacing: var(--text-headline-3-tracking); font-weight: var(--text-headline-3-weight); } .text-eyebrow { font-family: var(--font-system); font-size: var(--text-eyebrow-size); line-height: var(--text-eyebrow-line); letter-spacing: var(--text-eyebrow-tracking); font-weight: var(--text-eyebrow-weight); text-transform: uppercase; color: var(--color-label-secondary); } .text-title-1 { font-size: var(--text-title-1-size); line-height: var(--text-title-1-line); letter-spacing: var(--text-title-1-tracking); font-weight: var(--text-title-1-weight); } .text-title-2 { font-size: var(--text-title-2-size); line-height: var(--text-title-2-line); letter-spacing: var(--text-title-2-tracking); font-weight: var(--text-title-2-weight); } .text-title-3 { font-size: var(--text-title-3-size); line-height: var(--text-title-3-line); letter-spacing: var(--text-title-3-tracking); font-weight: var(--text-title-3-weight); } .text-body { font-size: var(--text-body-size); line-height: var(--text-body-line); letter-spacing: var(--text-body-tracking); font-weight: var(--text-body-weight); } .text-body-large { font-size: var(--text-body-large-size); line-height: var(--text-body-large-line); letter-spacing: var(--text-body-large-tracking); font-weight: var(--text-body-large-weight); } .text-callout { font-size: var(--text-callout-size); line-height: var(--text-callout-line); letter-spacing: var(--text-callout-tracking); font-weight: var(--text-callout-weight); } .text-subheadline { font-size: var(--text-subheadline-size); line-height: var(--text-subheadline-line); letter-spacing: var(--text-subheadline-tracking); font-weight: var(--text-subheadline-weight); } .text-footnote { font-size: var(--text-footnote-size); line-height: var(--text-footnote-line); letter-spacing: var(--text-footnote-tracking); font-weight: var(--text-footnote-weight); } .text-caption-1 { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); letter-spacing: var(--text-caption-1-tracking); font-weight: var(--text-caption-1-weight); } .text-caption-2 { font-size: var(--text-caption-2-size); line-height: var(--text-caption-2-line); letter-spacing: var(--text-caption-2-tracking); font-weight: var(--text-caption-2-weight); } /* Text colors */ .text-primary { color: var(--color-label); } .text-secondary { color: var(--color-label-secondary); } .text-tertiary { color: var(--color-label-tertiary); } .text-quaternary { color: var(--color-label-quaternary); } .text-accent { color: var(--color-accent); } /* Text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Text balance for headings */ .text-balance { text-wrap: balance; } /* ============================================================================ 15. LAYOUT UTILITY CLASSES ============================================================================ */ .container { width: 100%; max-width: var(--layout-max-width); margin-left: auto; margin-right: auto; padding-left: var(--layout-margin); padding-right: var(--layout-margin); } .container-wide { max-width: var(--layout-max-width-wide); margin-left: auto; margin-right: auto; padding-left: var(--layout-margin); padding-right: var(--layout-margin); } .container-narrow { max-width: var(--layout-max-width-narrow); margin-left: auto; margin-right: auto; padding-left: var(--layout-margin); padding-right: var(--layout-margin); } .container-hero { max-width: var(--layout-max-width-hero); margin-left: auto; margin-right: auto; padding-left: var(--layout-margin); padding-right: var(--layout-margin); } /* Grid */ .grid { display: grid; gap: var(--grid-gutter); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-12 { grid-template-columns: repeat(12, 1fr); } /* Flex */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .gap-10 { gap: var(--space-10); } .gap-12 { gap: var(--space-12); } .gap-16 { gap: var(--space-16); } /* Sections */ .section { padding-top: var(--section-padding-md); padding-bottom: var(--section-padding-md); } .section-sm { padding-top: var(--section-padding-sm); padding-bottom: var(--section-padding-sm); } .section-lg { padding-top: var(--section-padding-lg); padding-bottom: var(--section-padding-lg); } .section-xl { padding-top: var(--section-padding-xl); padding-bottom: var(--section-padding-xl); } /* ============================================================================ 16. COMPONENT CLASSES ============================================================================ */ /* --------------------------------------------------------------------------- 16a. Navigation Bar --------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; height: var(--size-nav-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--layout-margin); background: var(--material-chrome); backdrop-filter: var(--backdrop-nav); -webkit-backdrop-filter: var(--backdrop-nav); border-bottom: var(--border-subtle); z-index: var(--z-sticky); } .nav-compact { height: var(--size-nav-height-compact); } /* --------------------------------------------------------------------------- 16b. Buttons --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--size-button-height); padding: 0 var(--space-8); font-family: var(--font-system); font-size: var(--text-body-size); font-weight: var(--weight-medium); letter-spacing: var(--text-body-tracking); line-height: 1; border: none; border-radius: var(--radius-button); cursor: pointer; transition: var(--transition-button); text-decoration: none; white-space: nowrap; -webkit-user-select: none; user-select: none; } .btn:active { transform: scale(0.97); } /* Primary — filled */ .btn-primary { background-color: var(--color-accent); color: hsl(0, 0%, 100%); } .btn-primary:hover { background-color: var(--color-accent-hover); text-decoration: none; } .btn-primary:active { background-color: var(--color-accent-active); } /* Secondary — gray fill */ .btn-secondary { background-color: var(--color-fill); color: var(--color-accent); } .btn-secondary:hover { background-color: var(--color-fill-secondary); text-decoration: none; } /* Ghost — text only */ .btn-ghost { background: transparent; color: var(--color-accent); padding: 0 var(--space-4); } .btn-ghost:hover { background-color: var(--color-fill-quaternary); text-decoration: none; } /* Mini link-style button (like "Learn more >") */ .btn-link { background: none; border: none; color: var(--color-accent); font-size: var(--text-body-large-size); font-weight: var(--weight-regular); padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); height: auto; } .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* Sizes */ .btn-sm { height: var(--size-button-height-sm); padding: 0 var(--space-5); font-size: var(--text-footnote-size); } .btn-lg { height: var(--size-button-height-lg); padding: 0 var(--space-10); font-size: var(--text-title-3-size); } /* --------------------------------------------------------------------------- 16c. Cards --------------------------------------------------------------------------- */ .card { background: var(--gradient-card); border-radius: var(--radius-card); padding: var(--space-8); transition: var(--transition-card); overflow: hidden; } .card-elevated { box-shadow: var(--shadow-sm); } .card-elevated:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card-filled { background-color: var(--color-background-secondary); } .card-hero { border-radius: var(--radius-card-large); padding: var(--space-16); text-align: center; } .card-dark { background: var(--gradient-midnight); color: hsl(0, 0%, 100%); } /* --------------------------------------------------------------------------- 16d. Form Inputs --------------------------------------------------------------------------- */ .input { display: block; width: 100%; height: var(--size-input-height); padding: 0 var(--space-4); font-family: var(--font-system); font-size: var(--text-body-size); color: var(--color-label); background-color: var(--color-fill-tertiary); border: var(--border-width-default) solid transparent; border-radius: var(--radius-input); outline: none; transition: var(--transition-all); } .input::placeholder { color: var(--color-placeholder); } .input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px hsl(211, 100%, 50%, 0.20); } /* --------------------------------------------------------------------------- 16e. Chips / Tags --------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-footnote-size); font-weight: var(--weight-medium); color: var(--color-accent); background-color: var(--color-fill-quaternary); border-radius: var(--radius-chip); cursor: pointer; transition: var(--transition-button); } .chip:hover { background-color: var(--color-fill-tertiary); } .chip-active { background-color: var(--color-accent); color: hsl(0, 0%, 100%); } /* --------------------------------------------------------------------------- 16f. Modal / Sheet --------------------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; background: hsl(0, 0%, 0%, 0.40); backdrop-filter: blur(var(--blur-sm)); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); } .modal { background: var(--color-background); border-radius: var(--radius-modal); box-shadow: var(--shadow-2xl); padding: var(--space-8); max-width: var(--layout-max-width-compact); width: 90%; max-height: 85vh; overflow-y: auto; } /* --------------------------------------------------------------------------- 16g. Dividers --------------------------------------------------------------------------- */ .divider { width: 100%; height: 0.5px; background: var(--color-separator); border: none; } .divider-inset { margin-left: var(--space-4); } /* ============================================================================ 17. RESPONSIVE BREAKPOINTS ============================================================================ */ /* Tablet */ @media (max-width: 1024px) { :root { --layout-margin: var(--layout-margin-tablet); } .text-hero { font-size: 64px; } .text-display { font-size: 56px; } .text-headline-1 { font-size: 48px; } .text-headline-2 { font-size: 36px; } .text-headline-3 { font-size: 32px; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .section { padding-top: var(--section-padding-sm); padding-bottom: var(--section-padding-sm); } .section-lg { padding-top: var(--section-padding-md); padding-bottom: var(--section-padding-md); } } /* Mobile */ @media (max-width: 734px) { :root { --layout-margin: var(--layout-margin-mobile); --grid-gutter: var(--grid-gutter-compact); } .text-hero { font-size: 40px; } .text-display { font-size: 36px; } .text-headline-1 { font-size: 32px; } .text-headline-2 { font-size: 28px; } .text-headline-3 { font-size: 24px; } .text-body-large { font-size: 19px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding-top: var(--section-padding-xs); padding-bottom: var(--section-padding-xs); } .section-lg { padding-top: var(--section-padding-sm); padding-bottom: var(--section-padding-sm); } .card { padding: var(--space-5); } .card-hero { padding: var(--space-8); } .btn { height: var(--size-button-height-sm); padding: 0 var(--space-5); font-size: var(--text-callout-size); } .btn-lg { height: var(--size-button-height); padding: 0 var(--space-8); } /* Stack flex on mobile */ .flex-mobile-col { flex-direction: column; } } /* ============================================================================ 18. ANIMATION KEYFRAMES Apple-style reveal, fade, and scale animations. ============================================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes subtleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Animation utility classes */ .animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-default) forwards; } .animate-fade-up { animation: fadeUp var(--duration-moderate) var(--ease-spring) forwards; } .animate-fade-down { animation: fadeDown var(--duration-moderate) var(--ease-spring) forwards; } .animate-scale-in { animation: scaleIn var(--duration-moderate) var(--ease-spring) forwards; } .animate-slide-up { animation: slideUp var(--duration-slow) var(--ease-spring) forwards; } .animate-float { animation: subtleFloat 6s var(--ease-in-out) infinite; } /* Staggered delays */ .delay-1 { animation-delay: 100ms; } .delay-2 { animation-delay: 200ms; } .delay-3 { animation-delay: 300ms; } .delay-4 { animation-delay: 400ms; } .delay-5 { animation-delay: 500ms; } .delay-6 { animation-delay: 600ms; } /* ============================================================================ 19. ACCESSIBILITY & REDUCED MOTION ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Focus visible ring */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-xs); } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }