/** * ============================================================================= * NEXUS LIVING HUB — DESIGN TOKENS * style-tokens.css * * Master CSS custom properties file. * Contains ONLY :root declarations — zero component styles. * Every other stylesheet must reference these tokens; no hardcoded values. * * Sections: * 1. Colour Palette * 2. Semantic Colour Aliases * 3. Typography * 4. Type Scale (fluid clamp) * 5. Type Metrics * 6. Spacing Scale * 7. Section Padding * 8. Shape & Border Radius * 9. Box Shadows * 10. Glass Morphism * 11. Transitions * 12. Z-Index Scale * ============================================================================= */ :root { /* =========================================================================== 1. COLOUR PALETTE Source: CLAUDE.md §4.2 =========================================================================== */ /* Core Backgrounds */ --color-bg-primary: #FAF7F2; /* Ivory Cream — primary page bg */ --color-bg-secondary: #F0EBE3; /* Linen White — alternate section bg */ --color-bg-dark: #2C1F14; /* Rich Walnut — dark sections, footer */ --color-highlight: #E8D5C4; /* Dusty Rose Blush — testimonial bg, tints */ /* Core Text */ --color-text-primary: #2B2B2B; /* Deep Charcoal — main body text */ --color-text-on-dark: #F5F0E8; /* Soft Ivory — text on dark surfaces */ --color-text-muted: #9E9E8E; /* Warm Grey — captions, meta */ /* Brand Accents */ --color-accent-gold: #C9A96E; /* Warm Muted Gold — primary brand accent */ --color-gold-text: #A68B4B; /* WCAG AA Gold Text — use on light bg only; #C9A96E fails 4.5:1 */ --color-accent-dark: #4A3728; /* Espresso Brown — dark accent, headers */ --color-accent-green: #2D4A3E; /* Deep Forest Green — process section bg */ --color-terracotta: #C87941; /* Terracotta Warm — 2BHK, warmth accent */ /* CTA Colours */ --color-cta: #D4821A; /* Warm Amber — primary CTA button */ --color-cta-hover: #B5691A; /* Deep Ochre — CTA hover state */ /* Borders & Dividers */ --color-border: #DDD3C5; /* Parchment — card borders, dividers*/ /* Third-Party Brand Colours */ --color-whatsapp: #25D366; /* WhatsApp Green — sticky WA button */ --color-whatsapp-hover: #1EBE5A; /* WhatsApp Hover — darker on hover */ /* =========================================================================== 2. SEMANTIC COLOUR ALIASES Map role-based names to palette tokens for easier theming. =========================================================================== */ --color-surface: var(--color-bg-primary); --color-surface-raised: var(--color-bg-secondary); --color-on-surface: var(--color-text-primary); --color-on-surface-muted: var(--color-text-muted); --color-primary: var(--color-accent-gold); --color-primary-dark: var(--color-accent-dark); --color-interactive: var(--color-cta); --color-interactive-hover:var(--color-cta-hover); --color-overlay-dark: rgba(44, 31, 20, 0.60); /* hero overlay */ --color-overlay-modal: rgba(44, 31, 20, 0.70); /* modal backdrop */ --color-overlay-light: rgba(250, 247, 242, 0.92);/* nav scroll bg */ /* =========================================================================== 3. TYPOGRAPHY — FONT FAMILIES Source: CLAUDE.md §4.3 Fonts loaded via Google Fonts CDN in each HTML . =========================================================================== */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --font-accent: 'Jost', 'Helvetica Neue', Arial, sans-serif; --font-numbers: 'Libre Baskerville', Georgia, 'Times New Roman', serif; /* =========================================================================== 4. TYPE SCALE — FLUID SIZES (clamp) Source: CLAUDE.md §4.3 Pattern: clamp(min, preferred, max) =========================================================================== */ --h1-size: clamp(2.25rem, 5vw, 3.5rem); /* 36px → 56px */ --h2-size: clamp(1.75rem, 4vw, 2.625rem); /* 28px → 42px */ --h3-size: clamp(1.375rem, 3vw, 1.75rem); /* 22px → 28px */ --h4-size: clamp(1.125rem, 2vw, 1.4rem); /* 18px → 22px */ --body-size: 1rem; /* 16px */ --small-size: 0.8125rem; /* 13px */ --cta-size: 0.875rem; /* 14px */ /* Additional display size for extra-large hero moments */ --hero-size: clamp(2.75rem, 6vw, 4.5rem); /* 44px → 72px */ /* =========================================================================== 5. TYPE METRICS — WEIGHTS, LINE-HEIGHTS, LETTER-SPACING Source: CLAUDE.md §4.3 =========================================================================== */ /* Font Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line Heights */ --lh-tight: 1.2; /* display headings */ --lh-snug: 1.4; /* section headings */ --lh-normal: 1.6; /* sub-headings */ --lh-relaxed: 1.75; /* body copy */ --lh-loose: 2.0; /* captions, labels */ /* Letter Spacing */ --ls-tight: -0.02em; /* display headings */ --ls-normal: 0em; /* body */ --ls-wide: 0.08em; /* small/caption */ --ls-wider: 0.12em; /* CTA labels (JOST) */ --ls-widest: 0.18em; /* overline labels */ /* =========================================================================== 6. SPACING SCALE Source: CLAUDE.md §5.4 =========================================================================== */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 5rem; /* 80px */ --space-3xl: 7.5rem; /* 120px */ /* =========================================================================== 7. SECTION PADDING (responsive) Source: CLAUDE.md §5.4 =========================================================================== */ --section-pad-mobile: var(--space-xl) 0; /* 48px top & bottom */ --section-pad-tablet: var(--space-2xl) 0; /* 80px */ --section-pad-desktop: var(--space-3xl) 0; /* 120px */ /* =========================================================================== 8. SHAPE & BORDER RADIUS Source: CLAUDE.md §5.1 =========================================================================== */ --radius-sm: 4px; /* buttons, small inputs */ --radius-md: 8px; /* cards, panels, modals */ --radius-lg: 16px; /* large cards, hero insets */ --radius-xl: 24px; /* feature blocks */ --radius-pill: 9999px;/* tags, badges, pills */ --radius-full: 50%; /* circular elements */ /* =========================================================================== 9. BOX SHADOWS Source: CLAUDE.md §5.2 Never use hard shadows — always soft, warm-tinted. =========================================================================== */ --shadow-sm: 0 2px 12px rgba(74, 55, 40, 0.06); /* subtle depth */ --shadow-md: 0 4px 24px rgba(74, 55, 40, 0.08); /* default card */ --shadow-lg: 0 8px 32px rgba(74, 55, 40, 0.12); /* hover / lifted */ --shadow-xl: 0 16px 48px rgba(74, 55, 40, 0.16); /* modal / overlay */ --shadow-inset: inset 0 2px 8px rgba(74, 55, 40, 0.05); /* =========================================================================== 10. GLASS MORPHISM Source: CLAUDE.md §5.2 Only for overlay cards on dark/image backgrounds. =========================================================================== */ --glass-bg: rgba(250, 247, 242, 0.12); --glass-bg-stronger: rgba(250, 247, 242, 0.20); --glass-blur: blur(12px); --glass-blur-light: blur(6px); --glass-border: 1px solid rgba(201, 169, 110, 0.25); /* =========================================================================== 11. TRANSITIONS Consistent easing and timing for interactive elements. =========================================================================== */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-xslow: 600ms ease-out; /* Named transitions for specific components */ --transition-nav: background 300ms ease, box-shadow 300ms ease, color 300ms ease; --transition-card: transform 300ms ease, box-shadow 300ms ease; --transition-btn: background-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease; --transition-link: color 200ms ease, opacity 200ms ease; --transition-reveal: opacity 600ms ease-out, transform 600ms ease-out; /* =========================================================================== 12. Z-INDEX SCALE Predictable layering across all components. =========================================================================== */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-nav: 1000; --z-modal: 2000; --z-toast: 3000; --z-whatsapp: 9999; }