/* ================================================================ Starting11Photography — Design tokens Source of truth: design.md / design-system.html (identical values) The public site is dark-only: is hardcoded. ================================================================ */ :root { /* Brand & semantic (theme-independent) */ --color-brand: #B6F24A; --color-brand-hover: #C7F86B; --color-secondary: #2E5339; --color-accent: #EAD9B0; --color-success: #4ADE80; --color-warning: #FBBF24; --color-error: #F87171; /* Dark theme (default — public site is dark-only) */ --color-bg: #0D0F0E; --color-surface: #161A17; --color-surface-2: #1E2320; --color-border: #2A302C; --color-muted: #8A938B; --color-text: #F4F7F2; --color-text-secondary:#AEB6AD; --color-text-inverse: #0D0F0E; --color-overlay: rgba(8,10,9,0.72); --color-cta-bg: #B6F24A; --color-cta-text: #0D0F0E; --color-accent-ink: #B6F24A; /* Typography */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-script: 'Caveat', cursive; --text-display: clamp(3.5rem, 9vw, 8rem); --text-h1: clamp(2.5rem, 5vw, 4rem); --text-h2: 3rem; --text-h3: 2.25rem; --text-h4: 1.75rem; --text-h5: 1.375rem; --text-h6: 1.125rem; --text-body-lg: 1.125rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.8125rem; --text-eyebrow: 0.75rem; --tracking-wordmark: 0.3em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Borders */ --border-hairline: 1px; --border-thick: 2px; /* Shadows */ --shadow-1: 0 1px 2px rgba(0,0,0,.30); --shadow-2: 0 6px 20px rgba(0,0,0,.35); --shadow-3: 0 24px 60px rgba(0,0,0,.50); --shadow-glow: 0 0 0 1px var(--color-brand), 0 8px 30px rgba(182,242,74,.18); --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand); /* Z-index layers */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* Layout */ --container: 1280px; --container-wide: 1536px; /* Motion */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-slower: 600ms; --ease-standard: cubic-bezier(.4,0,.2,1); --ease-entrance: cubic-bezier(0,0,.2,1); --ease-emphasized: cubic-bezier(.2,.8,.2,1); } /* Light-theme tokens retained for the admin, if needed */ [data-theme="light"] { --color-bg: #FAFBF8; --color-surface: #FFFFFF; --color-surface-2: #F0F2EC; --color-border: #DCE2D5; --color-muted: #6B736A; --color-text: #131815; --color-text-secondary: #4C544B; --color-text-inverse: #FAFBF8; --color-overlay: rgba(13,15,14,0.55); --color-cta-bg: #2E5339; --color-cta-text: #FAFBF8; --color-accent-ink: #2E5339; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }