/**
 * Supa View Resort — Design tokens
 * Luxury hospitality + Himalayan nature. Use via var(--sv-*) or Tailwind @theme aliases.
 */

:root {
    /* ─── Color: surfaces ───────────────────────────────────────── */
    --sv-color-parchment: #f4f1ec;
    --sv-color-linen: #ebe6de;
    --sv-color-mist: #e3dfd8;
    --sv-color-surface: #fffcf8;
    --sv-color-surface-elevated: #ffffff;
    --sv-color-sage-pale: #e7ece3;
    --sv-color-sage-mist: #dce3d6;

    /* ─── Color: ink (typography) ───────────────────────────────── */
    --sv-color-ink: #1c1b19;
    --sv-color-ink-soft: #3a3834;
    --sv-color-ink-muted: #5c5854;
    --sv-color-ink-faint: #8a8580;

    /* ─── Color: nature ─────────────────────────────────────────── */
    --sv-color-sage: #6b7a68;
    --sv-color-moss: #4f5e4d;
    --sv-color-cedar: #3d4a3a;
    --sv-color-sky-wash: #c5d4ce;
    --sv-color-stone: #d4cfc6;

    /* ─── Color: accent (bronze — override via SITE_PRIMARY_COLOR) */
    --sv-color-bronze: #9a8456;
    --sv-color-bronze-light: #b59e54;
    --sv-color-bronze-deep: #7d6b44;
    --sv-color-bronze-whisper: rgba(154, 132, 86, 0.14);
    --sv-color-bronze-glow: rgba(181, 158, 84, 0.22);

    /* ─── Color: borders & overlays ─────────────────────────────── */
    --sv-color-border: rgba(28, 27, 25, 0.1);
    --sv-color-border-strong: rgba(28, 27, 25, 0.18);
    --sv-color-overlay-hero: rgba(28, 27, 25, 0.35);
    --sv-color-overlay-scrim: rgba(28, 27, 25, 0.5);
    --sv-color-focus-ring: rgba(154, 132, 86, 0.45);

    /* ─── Semantic aliases ──────────────────────────────────────── */
    --sv-bg: var(--sv-color-sage-pale);
    --sv-bg-subtle: var(--sv-color-sage-mist);
    --sv-text: var(--sv-color-ink);
    --sv-text-muted: var(--sv-color-ink-muted);
    --sv-accent: var(--sv-color-bronze);
    --sv-accent-hover: var(--sv-color-bronze-deep);

    /* ─── Typography: families ──────────────────────────────────── */
    --sv-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
    --sv-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --sv-font-accent: 'Great Vibes', cursive;

    /* ─── Typography: scale (fluid) ─────────────────────────────── */
    --sv-text-display-2xl: clamp(3.25rem, 7.5vw, 6.5rem);
    --sv-text-display-xl: clamp(2.5rem, 5.5vw, 4.75rem);
    --sv-text-display-lg: clamp(2rem, 4vw, 3.25rem);
    --sv-text-h1: clamp(1.875rem, 3.2vw, 2.75rem);
    --sv-text-h2: clamp(1.5rem, 2.5vw, 2.125rem);
    --sv-text-h3: clamp(1.25rem, 2vw, 1.5rem);
    --sv-text-body-lg: clamp(1.0625rem, 1.2vw, 1.1875rem);
    --sv-text-body: 1rem;
    --sv-text-body-sm: 0.875rem;
    --sv-text-caption: 0.8125rem;
    --sv-text-eyebrow: 0.6875rem;

    /* ─── Typography: line-height & tracking ────────────────────── */
    --sv-leading-display: 1.05;
    --sv-leading-tight: 1.2;
    --sv-leading-snug: 1.35;
    --sv-leading-body: 1.75;
    --sv-leading-relaxed: 1.85;
    --sv-tracking-display: -0.02em;
    --sv-tracking-tight: -0.01em;
    --sv-tracking-eyebrow: 0.22em;
    --sv-tracking-caps: 0.14em;
    --sv-tracking-wide: 0.08em;

    /* ─── Spacing (4px base) ──────────────────────────────────────── */
    --sv-space-0: 0;
    --sv-space-1: 0.25rem;
    --sv-space-2: 0.5rem;
    --sv-space-3: 0.75rem;
    --sv-space-4: 1rem;
    --sv-space-5: 1.25rem;
    --sv-space-6: 1.5rem;
    --sv-space-8: 2rem;
    --sv-space-10: 2.5rem;
    --sv-space-12: 3rem;
    --sv-space-16: 4rem;
    --sv-space-20: 5rem;
    --sv-space-24: 6rem;
    --sv-space-32: 8rem;
    --sv-space-40: 10rem;
    --sv-space-section: clamp(4.5rem, 10vh, 7.5rem);
    --sv-space-section-sm: clamp(3.5rem, 8vh, 6rem);
    --sv-space-block: clamp(1.5rem, 3vw, 2.5rem);
    --sv-space-gutter: clamp(1.25rem, 5vw, 4rem);

    /* ─── Layout ────────────────────────────────────────────────── */
    --sv-container-prose: 42rem;
    --sv-container-content: 90rem;

    /* One gentle grade for interior photography: tames saturated brick and flash light. */
    --sv-photo-grade: saturate(0.86) contrast(1.04) brightness(1.02);
    --sv-container-wide: 100rem;
    --sv-grid-columns: 12;
    --sv-grid-gap: clamp(1rem, 2vw, 2rem);
    --sv-header-height: 5.5rem;
    --sv-header-height-shrunk: 4.75rem;

    /* ─── Radius (sharp luxury — minimal rounding) ──────────────── */
    --sv-radius-none: 0;
    --sv-radius-sm: 2px;
    --sv-radius-md: 4px;
    --sv-radius-pill: 9999px;

    /* ─── Elevation (avoid shadows; use borders) ─────────────────── */
    --sv-shadow-none: none;
    --sv-shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    --sv-shadow-header: 0 1px 0 var(--sv-color-border);

    /* ─── Motion ─────────────────────────────────────────────────── */
    /* Easing: luxury = smooth decel, immersive = slow ease-out for cinematic reveals */
    --sv-ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
    --sv-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --sv-ease-immersive: cubic-bezier(0.16, 1, 0.3, 1);
    --sv-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --sv-duration-instant: 0ms;
    --sv-duration-fast: 200ms;
    --sv-duration-quick: 350ms;
    --sv-duration-base: 600ms;
    --sv-duration-slow: 900ms;
    --sv-duration-cinematic: 1200ms;
    --sv-duration-extended: 1800ms;
    --sv-stagger-step: 80ms;
    --sv-reveal-distance: 1.5rem;

    /* ─── Z-index ─────────────────────────────────────────────────── */
    --sv-z-base: 0;
    --sv-z-elevated: 10;
    --sv-z-header: 100;
    --sv-z-overlay: 200;
    --sv-z-modal: 300;
}

/* CMS primary color hook — set inline or via PHP: style="--sv-accent: #..." */
[data-sv-theme] {
    --sv-accent: var(--sv-site-primary, var(--sv-color-bronze));
    --sv-accent-hover: var(--sv-site-primary-deep, var(--sv-color-bronze-deep));
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sv-duration-fast: 0ms;
        --sv-duration-quick: 0ms;
        --sv-duration-base: 0ms;
        --sv-duration-slow: 0ms;
        --sv-duration-cinematic: 0ms;
        --sv-duration-extended: 0ms;
        --sv-stagger-step: 0ms;
        --sv-reveal-distance: 0;
    }
}