/* ========================================================================== variables.css — Design Tokens Bankenveld Golf Estate Single source of truth for colours, type, spacing, shadows, radius, transitions and glassmorphism. Do not hard-code values elsewhere. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR — Brand Luxury golf-estate palette: forest & emerald greens, warm off-white, dark charcoal, soft gold accent. ---------------------------------------------------------------------- */ --color-forest: #123524; /* deep forest green */ --color-forest-deep: #0b2016; /* near-black green */ --color-emerald: #1f7a54; /* emerald */ --color-emerald-light: #2f9d6c; --color-sage: #7ea892; /* muted sage */ /* Semantic brand aliases (kept stable for components) */ --color-primary: var(--color-forest); --color-primary-light: var(--color-emerald); --color-primary-dark: var(--color-forest-deep); --color-secondary: var(--color-emerald); --color-accent: #c8a86a; /* soft gold */ --color-accent-light: #e4cfa0; --color-accent-dark: #a5854a; --color-gold-sheen: #d9bf88; /* COLOUR — Neutrals */ --color-black: #0a0f0c; --color-charcoal: #1d2321; /* dark charcoal */ --color-charcoal-soft: #2a312e; --color-white: #ffffff; --color-cream: #f7f4ec; /* warm off-white */ --color-off-white: #faf8f2; --color-sand: #ece5d7; --color-stone-100: #f5f5f4; --color-stone-200: #e7e5e4; --color-stone-300: #d6d3d1; --color-stone-400: #a8a29e; --color-stone-500: #78716c; --color-stone-600: #57534e; --color-stone-700: #44403c; --color-stone-800: #292524; --color-stone-900: #1c1917; /* COLOUR — Semantic */ --color-text: var(--color-charcoal); --color-text-muted: #5c6560; --color-text-inverse: var(--color-off-white); --color-bg: var(--color-off-white); --color-bg-alt: var(--color-white); --color-surface: var(--color-white); --color-border: rgba(18, 53, 36, 0.10); --color-success: var(--color-emerald); --color-warning: #b45309; --color-error: #b91c1c; --color-info: #1d4ed8; /* Signature gradients */ --gradient-forest: linear-gradient(150deg, var(--color-forest) 0%, var(--color-forest-deep) 100%); --gradient-emerald: linear-gradient(150deg, var(--color-emerald) 0%, var(--color-forest) 100%); --gradient-gold: linear-gradient(120deg, var(--color-accent-light), var(--color-accent) 60%, var(--color-accent-dark)); --gradient-sheen: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%); --gradient-fade-top: linear-gradient(to bottom, rgba(11,32,22,0.55), transparent 40%); /* COLOUR — Overlays */ --overlay-dark: rgba(9, 24, 17, 0.50); --overlay-darker: rgba(9, 24, 17, 0.78); --overlay-gradient: linear-gradient(180deg, rgba(9,24,17,0.35) 0%, rgba(9,24,17,0.15) 40%, rgba(9,24,17,0.65) 100%); --overlay-light: rgba(255, 255, 255, 0.65); /* ---------------------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------------------- */ --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Fluid type scale (clamp: min, preferred, max) */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem); --fs-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem); --fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem); --fs-2xl: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem); --fs-3xl: clamp(3rem, 2.3rem + 3vw, 4.5rem); --fs-hero: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.75; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.12em; /* ---------------------------------------------------------------------- SPACING — 4px base scale ---------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 8rem; /* 128px */ /* Section rhythm */ --section-padding-y: clamp(4rem, 8vw, 9rem); --container-max: 1280px; --container-wide: 1536px; --container-narrow: 768px; --gutter: clamp(1.25rem, 4vw, 3rem); /* ---------------------------------------------------------------------- RADIUS ---------------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px; --radius-circle: 50%; /* ---------------------------------------------------------------------- SHADOWS ---------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(11, 32, 22, 0.05); --shadow-sm: 0 2px 10px rgba(11, 32, 22, 0.06); --shadow-md: 0 10px 30px rgba(11, 32, 22, 0.08); --shadow-lg: 0 20px 50px rgba(11, 32, 22, 0.12); --shadow-xl: 0 34px 80px rgba(11, 32, 22, 0.18); --shadow-glow: 0 0 32px rgba(200, 168, 106, 0.40); --shadow-gold: 0 12px 34px rgba(165, 133, 74, 0.30); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14); /* ---------------------------------------------------------------------- TRANSITIONS & EASING ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 480ms; --dur-slower: 720ms; --transition-base: all var(--dur-base) var(--ease-out); --transition-color: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); --transition-transform: transform var(--dur-base) var(--ease-out); /* ---------------------------------------------------------------------- GLASSMORPHISM ---------------------------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.12); --glass-bg-strong: rgba(255, 255, 255, 0.22); --glass-bg-dark: rgba(10, 15, 12, 0.35); --glass-border: rgba(255, 255, 255, 0.25); --glass-blur: 16px; --glass-blur-strong: 28px; --glass-saturate: 140%; --glass-shadow: 0 8px 32px rgba(10, 15, 12, 0.18); /* ---------------------------------------------------------------------- LAYERING (z-index scale) ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-floating: 300; --z-overlay: 400; --z-modal: 500; --z-lightbox: 600; --z-loader: 900; --z-max: 999; } /* ========================================================================== DARK THEME OVERRIDES Toggled via [data-theme="dark"] on . Wired up in js/main.js. ========================================================================== */ :root[data-theme="dark"] { --color-text: var(--color-cream); --color-text-muted: var(--color-stone-400); --color-bg: var(--color-primary-dark); --color-bg-alt: #10231a; --color-surface: #14291e; --color-border: rgba(255, 255, 255, 0.10); --glass-bg: rgba(20, 41, 30, 0.35); --glass-border: rgba(255, 255, 255, 0.12); }