/* * ═══════════════════════════════════════════════════════════════════════════════ * Lavisa Destinations Theme — DESIGN TOKENS (additive layer) * ═══════════════════════════════════════════════════════════════════════════════ * * @file assets/css/ldt-tokens.css * @package Lavisa_Destinations_Theme * @since 2.0.0-alpha.1 (LDT-1) * * Registered BEFORE style.css by LDT_Enqueue so these definitions * form the baseline. style.css then extends/specializes. * * Scope of this file — ONLY tokens (no layout, no component styles, * no utilities). Every rule writes a CSS custom property. * * Backwards-compat note (LDT-1): * The existing tokens in style.css (:root) remain the canonical * definitions for brand colors, type scale, spacing, radii, shadows, * transitions and z-index. This file ADDS tokens introduced from * LDT-1 onwards so later stages (hero, single-destination, marketing * widgets, RTL) can reference a richer palette without re-editing * style.css on every session. * * ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Extended Neutral Ramp (full 50→950 scale) ──────────────────────────── */ /* Slate scale — extends style.css gray-200/300/400/500/600/700 ─────────── */ --ldt-gray-50: #f8fafc; --ldt-gray-100: #f1f5f9; --ldt-gray-800: #1e293b; --ldt-gray-900: #0f172a; --ldt-gray-950: #020617; /* ── Brand Accent Expansion ─────────────────────────────────────────────── */ /* Supports stage-specific accents (deals/marketing/loyalty) without */ /* polluting the primary/accent axis. */ --ldt-brand-secondary: #6d28d9; /* violet — nightlife, loyalty */ --ldt-brand-secondary-light: #8b5cf6; --ldt-brand-secondary-dark: #5b21b6; --ldt-brand-tertiary: #0891b2; /* teal — weather, water activities */ --ldt-brand-tertiary-light: #06b6d4; --ldt-brand-tertiary-dark: #0e7490; --ldt-brand-deals: #dc2626; /* red — deal/discount chrome */ --ldt-brand-deals-light: #ef4444; --ldt-brand-deals-dark: #b91c1c; --ldt-brand-loyalty: #ca8a04; /* gold — loyalty program */ --ldt-brand-loyalty-light: #eab308; --ldt-brand-loyalty-dark: #a16207; /* ── Surface Layers ──────────────────────────────────────────────────────── */ /* Layered backgrounds so cards/sections/modals feel tiered */ --ldt-surface-base: #ffffff; --ldt-surface-raised: #ffffff; --ldt-surface-sunken: #f8fafc; --ldt-surface-muted: #f1f5f9; --ldt-surface-overlay: rgba(15, 23, 42, 0.72); --ldt-surface-overlay-soft: rgba(15, 23, 42, 0.40); --ldt-surface-glass: rgba(255, 255, 255, 0.72); --ldt-surface-glass-dark: rgba(15, 23, 42, 0.60); /* ── Extended Radius ─────────────────────────────────────────────────────── */ --ldt-radius-2xs: 0.125rem; /* 2px — chips */ --ldt-radius-2xl: 1.5rem; /* 24px — hero cards */ --ldt-radius-3xl: 2rem; /* 32px — feature cards */ /* ── Extended Shadows (travel-industry feel) ─────────────────────────────── */ --ldt-shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04); --ldt-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25); --ldt-shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.06); --ldt-shadow-focus: 0 0 0 3px rgba(0, 87, 184, 0.35); /* primary-light 35% */ --ldt-shadow-focus-accent: 0 0 0 3px rgba(255, 140, 0, 0.35); --ldt-shadow-card-hover: 0 18px 40px -12px rgba(15, 23, 42, 0.22); /* ── Gradients (hero, CTA, deals) ────────────────────────────────────────── */ --ldt-gradient-primary: linear-gradient(135deg, #003580 0%, #0057b8 100%); --ldt-gradient-accent: linear-gradient(135deg, #ff8c00 0%, #ffa333 100%); --ldt-gradient-sunset: linear-gradient(135deg, #ff8c00 0%, #dc2626 60%, #6d28d9 100%); --ldt-gradient-sea: linear-gradient(135deg, #0891b2 0%, #003580 100%); --ldt-gradient-hero-overlay: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.65) 100%); --ldt-gradient-card-overlay: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.75) 100%); /* ── Extended Easing Curves ──────────────────────────────────────────────── */ --ldt-ease-in: cubic-bezier(0.4, 0, 1, 1); --ldt-ease-out: cubic-bezier(0, 0, 0.2, 1); --ldt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ldt-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); --ldt-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* ── Type Scale Additions ────────────────────────────────────────────────── */ --ldt-text-2xs: 0.6875rem; /* 11px — micro labels */ --ldt-text-6xl: 3.75rem; /* 60px — hero display */ --ldt-text-7xl: 4.5rem; /* 72px — landing hero */ --ldt-tracking-tight: -0.025em; --ldt-tracking-normal: 0; --ldt-tracking-wide: 0.025em; --ldt-tracking-wider: 0.05em; /* ── Container + Spacing Additions ───────────────────────────────────────── */ --ldt-container-narrow-sm: 720px; --ldt-container-prose: 680px; /* reading width for overview/practical copy */ --ldt-space-5xl: 8rem; /* 128px — section separators on hero pages */ /* ── Extended Z-Index Ladder ─────────────────────────────────────────────── */ /* style.css defines: dropdown=100, sticky=200, overlay=300, modal=400, toast=500 */ --ldt-z-below: -1; --ldt-z-base: 0; --ldt-z-raised: 10; --ldt-z-sticky-nav: 180; /* single-destination sticky anchor nav */ --ldt-z-header: 220; /* site header sits above sticky-nav */ --ldt-z-mega: 240; /* mega panels sit above header */ --ldt-z-drawer: 380; --ldt-z-popup: 450; /* marketing popup above modal */ --ldt-z-lightbox: 475; --ldt-z-tooltip: 600; /* ── Icon Sizing ─────────────────────────────────────────────────────────── */ --ldt-icon-xs: 14px; --ldt-icon-sm: 16px; --ldt-icon-md: 20px; --ldt-icon-lg: 24px; --ldt-icon-xl: 32px; --ldt-icon-2xl: 48px; /* ── Aspect Ratios (for card/hero imagery) ───────────────────────────────── */ --ldt-aspect-hero: 12 / 5; --ldt-aspect-hero-mobile: 4 / 5; --ldt-aspect-card: 3 / 2; --ldt-aspect-card-portrait: 4 / 5; --ldt-aspect-square: 1 / 1; --ldt-aspect-gallery: 4 / 3; --ldt-aspect-video: 16 / 9; /* ── Borders ─────────────────────────────────────────────────────────────── */ --ldt-border-hairline: 1px solid var(--ldt-gray-200); --ldt-border-default: 1px solid var(--ldt-gray-300); --ldt-border-strong: 1px solid var(--ldt-gray-400); --ldt-border-focus: 2px solid var(--ldt-primary-light); /* ── Focus Ring (accessibility — LDT-41 completes) ───────────────────────── */ --ldt-focus-outline: 2px solid var(--ldt-primary-light); --ldt-focus-outline-offset: 3px; /* ── Animation Durations ─────────────────────────────────────────────────── */ --ldt-duration-instant: 100ms; --ldt-duration-fast: 150ms; --ldt-duration-base: 250ms; --ldt-duration-slow: 400ms; --ldt-duration-slower: 600ms; --ldt-duration-crawl: 900ms; } /* ═══════════════════════════════════════════════════════════════════════════════ * RTL TOKEN OVERRIDES * When [dir="rtl"] is active (Arabic mode) a small set of tokens flip to better * serve the Arabic typography system. Full RTL stylesheet lands in LDT-39. * ═══════════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] :root, body.ldt-rtl { --ldt-tracking-tight: 0; /* Arabic script doesn't tighten the same way */ --ldt-tracking-normal: 0; --ldt-tracking-wide: 0; --ldt-line-tight: 1.4; /* Arabic needs more breathing room */ --ldt-line-normal: 1.65; --ldt-line-relaxed: 1.9; } /* ═══════════════════════════════════════════════════════════════════════════════ * PLUGIN-MISSING FALLBACK SURFACE * Body-class applied from functions.php when the paired plugin is inactive. * Softens the UI so the theme still looks intentional without plugin data. * ═══════════════════════════════════════════════════════════════════════════════ */ body.ldt-no-plugin { --ldt-surface-sunken: #f1f5f9; --ldt-surface-muted: #e2e8f0; --ldt-primary: #64748b; /* desaturated when offline */ --ldt-accent: #94a3b8; }