/* ========================================================================== Design Tokens - CSS Custom Properties ========================================================================== Single source of truth for all visual values. Change a token here and it propagates everywhere. ========================================================================== */ :root { /* ------------------------------------------------------------------ Colors Warm-tinted palette anchored in teal (--color-primary). Neutrals carry a faint warm hue so nothing reads sterile or corporate. ------------------------------------------------------------------ */ --color-primary: #206f7b; --color-primary-light: #79a9b0; --color-primary-dark: #164e56; --color-primary-deep: #0e3941; --color-secondary: #6b4a36; /* warm walnut — replaces unused olive */ --color-secondary-soft: #ede4d8; /* paper-cream tint of secondary */ --color-accent: #44ab89; --color-accent-soft: #d8ebe2; --color-background: #faf8f5; --color-background-warm: #f3ede4; --color-surface: #ffffff; --color-surface-tinted: #f7faf9; --color-surface-raised: #ffffff; --color-surface-warm: #f5efe5; /* warm card surface for featured tiles */ --color-text: #2a2f31; --color-text-light: #5d6669; --color-text-muted: #8a9295; --color-border: #e2ebec; --color-border-soft: #eef3f3; --color-border-warm: #ddd0bc; /* hairline ring on warm surfaces */ --color-divider: #e9e3d8; --color-footer-link: #b8d4d9; --color-error: #b3303f; --color-success: #1f7a5a; /* RGB triplets for tinted overlays / shadows */ --rgb-primary: 32, 111, 123; --rgb-primary-dark: 22, 78, 86; --rgb-secondary: 107, 74, 54; --rgb-text: 42, 47, 49; --rgb-warm: 90, 70, 40; /* ------------------------------------------------------------------ Typography Playfair Display (headings, full weight range) + Source Sans 3 (body). Italic option reserved for editorial accents. ------------------------------------------------------------------ */ --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; /* Font size scale — body small steps; display sizes lifted for editorial scale */ --font-size-xs: 0.8125rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 2.125rem; --font-size-3xl: 2.75rem; --font-size-4xl: 3.5rem; --font-size-5xl: 5.25rem; --font-size-display: 6.5rem; /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line heights */ --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.6; --line-height-loose: 1.75; /* Letter spacing (negative for display, positive for labels) */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-label: 0.12em; /* Optimal measure for body copy */ --measure-prose: 65ch; /* ------------------------------------------------------------------ Spacing (8px base unit) ------------------------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ------------------------------------------------------------------ Shadows Tinted with the primary color so elevation feels of-a-piece with the palette instead of generic black-on-white. ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(var(--rgb-primary-dark), 0.06); --shadow-sm: 0 1px 2px rgba(var(--rgb-primary-dark), 0.05), 0 1px 3px rgba(var(--rgb-primary-dark), 0.04); --shadow-md: 0 4px 6px rgba(var(--rgb-primary-dark), 0.06), 0 2px 4px rgba(var(--rgb-primary-dark), 0.05); --shadow-lg: 0 14px 28px rgba(var(--rgb-primary-dark), 0.10), 0 6px 10px rgba(var(--rgb-primary-dark), 0.06); --shadow-xl: 0 24px 48px rgba(var(--rgb-primary-dark), 0.14), 0 10px 20px rgba(var(--rgb-primary-dark), 0.08); --shadow-card-hover: 0 2px 8px rgba(var(--rgb-primary-dark), 0.05); --shadow-inset-edge: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ------------------------------------------------------------------ Border Radius ------------------------------------------------------------------ */ --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-card: 0.5rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* ------------------------------------------------------------------ Transitions / Easing Standardized durations and easings so motion feels coherent. ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Editorial spring — gentle initial settle, long tail. For scroll-entry and card hover. */ --ease-editorial: cubic-bezier(0.32, 0.72, 0, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-editorial: 800ms; --transition-fast: var(--duration-fast) var(--ease-out); --transition-normal: var(--duration-normal) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); --transition-editorial: var(--duration-editorial) var(--ease-editorial); /* ------------------------------------------------------------------ Z-index scale ------------------------------------------------------------------ */ --z-base: 1; --z-raised: 10; --z-sticky: 50; --z-overlay: 100; } /* Honor user motion preferences globally. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-editorial: 0ms; } }