/** * Everyday Luxury — Design Token Layer * * Single source of truth for the EL brand system across the theme and plugin. * Enqueued before all other plugin and theme stylesheets so every surface can * reference var(--el-*) without caring which file defined it. * * Token namespace: --el-* canonical (use in new CSS) * Compat aliases: --hsc-el-* map to --el-* so existing plugin CSS keeps working * * @package HavenStreamlineConnector * @since 1.5.0 */ :root { /* ========================================================================== Colour — Brand Palette ========================================================================== */ /** Primary ink / text */ --el-ink: #111C26; /* Deep ink – headings, body copy */ --el-ink-deep: #0B1520; /* Deepest ink – high-contrast / hover states */ --el-ink-soft: #223543; /* Softened ink – secondary headings, captions */ /** Accent gold (Sand Dune) */ --el-gold: #C4A078; /* Primary brand gold – CTAs, highlights */ --el-gold-soft: #D7C39B; /* Lighter gold – tinted borders / backgrounds */ --el-gold-pale: #F5EDE0; /* Near-white gold wash – section backgrounds */ --el-gold-contrast: #8A6538; /* AA text contrast on cream / white surfaces */ /** Secondary action (Coastal Sage) */ --el-teal: #6B8C7A; /* Secondary action colour – links, tags */ --el-teal-dark: #4E6E5C; /* Hover state for teal interactive elements */ /** Semantic */ --el-terra: #B5614A; /* Terracotta – error / destructive / alert */ --el-terra-contrast: #9B4B3B; /* AA text contrast on cream / white surfaces */ --el-success: #4A8C6F; /* Confirmation / success states */ /** Text hierarchy */ --el-muted: #948571; /* Tertiary / placeholder / metadata text */ --el-text-secondary: #65584A; /* Secondary body copy, form labels */ /** Borders */ --el-border: rgba(17, 28, 38, 0.12); /* Default neutral border */ --el-border-strong: rgba(196, 160, 120, 0.24); /* Gold-tinted accent border */ --el-border-input: rgba(17, 28, 38, 0.20); /* Form input borders */ /** Surfaces */ --el-surface: #FFFFFF; /* Card / modal / widget surface */ --el-surface-soft: #F4F5F3; /* Page background / input fill / ghost areas */ --el-cream: #F2ECE2; /* Warm off-white editorial panels */ --el-white: #FAF7F1; /* Warm brand white (use instead of pure white) */ --el-panel-dark: #241D16; /* Dark editorial panels / hero overlays */ --el-panel-dark-2: #34291E; /* Slightly lighter dark panel variant */ /** Legacy editorial palette aliases */ --el-earth: #1E1A14; --el-earth-2: #2A241B; --el-sand: var(--el-gold); --el-sand-soft: #E5D2B8; --el-sand-light: #E8D9C4; --el-sand-contrast: var(--el-gold-contrast); --el-linen: #FAF7F1; --el-paper: #F6EFE5; --el-sky: #5E9CB3; --el-sky-contrast: #3F7082; /* ========================================================================== Typography ========================================================================== */ --el-font-display: 'Cormorant Garamond', 'Times New Roman', serif; --el-font-body: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; --el-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --el-text-xs: 11px; --el-text-sm: 13px; --el-text-base: 15px; --el-text-md: 17px; --el-text-lg: 20px; --el-text-xl: 24px; --el-text-2xl: 32px; --el-text-3xl: 42px; --el-leading-tight: 1.2; --el-leading-normal: 1.55; --el-leading-loose: 1.75; --el-weight-regular: 400; --el-weight-medium: 500; --el-weight-semibold: 600; --el-weight-bold: 700; /* ========================================================================== Spacing Scale ========================================================================== */ --el-space-1: 4px; --el-space-2: 8px; --el-space-3: 12px; --el-space-4: 16px; --el-space-5: 20px; --el-space-6: 24px; --el-space-8: 32px; --el-space-10: 40px; --el-space-12: 48px; --el-space-16: 64px; --el-space-20: 80px; --el-space-24: 96px; /* Legacy named aliases */ --el-space-xs: var(--el-space-1); --el-space-sm: var(--el-space-2); --el-space-md: var(--el-space-4); --el-space-lg: var(--el-space-6); --el-space-xl: var(--el-space-10); --el-space-2xl: var(--el-space-16); /* ========================================================================== Border Radius ========================================================================== */ --el-radius-xs: 4px; --el-radius-sm: 6px; --el-radius-md: 12px; --el-radius-lg: 24px; --el-radius-full: 9999px; /* ========================================================================== Shadows ========================================================================== */ --el-shadow-xs: 0 2px 8px rgba(30, 26, 20, 0.06); --el-shadow-sm: 0 10px 24px rgba(30, 26, 20, 0.08); --el-shadow-md: 0 20px 42px rgba(30, 26, 20, 0.12); --el-shadow-lg: 0 30px 68px rgba(30, 26, 20, 0.18); /* Card-specific shadow (used on property cards, sidebar widget) */ --el-shadow-card: 0 2px 12px rgba(30, 26, 20, 0.08); /* ========================================================================== Motion / Transitions ========================================================================== */ --el-transition: 0.22s ease; --el-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --el-transition-slow: 0.45s ease; /* ========================================================================== Layout ========================================================================== */ --el-page-max-width: min(2200px, calc(100vw - 48px)); --el-content-max: 780px; /* Long-form editorial text column */ --el-sidebar-width: 360px; /* Booking sidebar on desktop property pages */ /* ========================================================================== Backwards-compat aliases (--hsc-el-* → --el-*) These keep existing plugin CSS working without a full find-and-replace. New CSS should use --el-* directly. ========================================================================== */ --hsc-el-ink: var(--el-ink); --hsc-el-ink-soft: var(--el-ink-soft); --hsc-el-gold: var(--el-gold); --hsc-el-teal: var(--el-teal); --hsc-el-border: var(--el-border); --hsc-el-border-strong: var(--el-border-strong); --hsc-el-cream: var(--el-surface-soft); --hsc-el-white: var(--el-surface); /* Theme-side --el-* compat (streamline-compat.css also defines these but this file loads first and provides the canonical fallback values) */ --el-ink-compat: var(--el-ink); --el-gold-compat: var(--el-gold); --el-surface-compat: var(--el-surface); }