/* ============================================================
   DESIGN TOKENS — single source of truth for the entire theme.
   Loaded before all other stylesheets. Brand colors are still
   injected dynamically by RunCustomStyles() in functions.php
   (--brand-pri, --brand-sec, --brand-pri-text, --brand-sec-text);
   this file adds everything else: a full color palette, spacing
   scale, type scale, radii, shadows, easing, durations, and
   z-index scale. Existing rules using fallbacks like
   var(--brand-pri, #3264f5) keep working unchanged.
   ============================================================ */

:root {
    /* ===== Color — neutral ramp (slate) ===== */
    --color-white:        #ffffff;
    --color-black:        #000000;
    --color-bg:           #ffffff;
    --color-bg-alt:       #fafafa;
    --color-bg-muted:     #f8fafc;

    --color-fg:           #0f172a;
    --color-fg-strong:    #0b1220;
    --color-fg-muted:     #475569;
    --color-fg-subtle:    #64748b;
    --color-fg-faint:     #94a3b8;

    --color-border:       #e2e8f0;
    --color-border-soft:  #eef2f6;
    --color-border-strong:#cbd5e1;

    /* ===== Color — semantic state ===== */
    --color-success:      #10b981;
    --color-success-bg:   #ecfdf5;
    --color-warning:      #f59e0b;
    --color-warning-bg:   #fffbeb;
    --color-danger:       #ef4444;
    --color-danger-bg:    #fef2f2;
    --color-info:         #0ea5e9;
    --color-info-bg:      #f0f9ff;

    /* ===== Color — brand aliases (keep using --brand-pri elsewhere;
            these are convenience aliases for components that need
            a consistent name and a baked-in fallback) ===== */
    --color-primary:      var(--brand-pri, #3264f5);
    --color-primary-fg:   var(--brand-pri-text, #ffffff);
    --color-secondary:    var(--brand-sec, #7202bb);
    --color-secondary-fg: var(--brand-sec-text, #ffffff);

    /* ===== Spacing — 4px base ===== */
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   32px;
    --space-8:   40px;
    --space-9:   48px;
    --space-10:  64px;
    --space-11:  80px;
    --space-12:  96px;

    /* ===== Typography — fluid scale ===== */
    --font-sans:   'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif:  'Rufina', Georgia, 'Times New Roman', serif;
    --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs:   0.75rem;       /* 12 */
    --text-sm:   0.875rem;      /* 14 */
    --text-base: 1rem;          /* 16 */
    --text-md:   1.125rem;      /* 18 */
    --text-lg:   1.25rem;       /* 20 */
    --text-xl:   clamp(1.375rem, 1.2rem + .9vw, 1.625rem);
    --text-2xl:  clamp(1.625rem, 1.4rem + 1.2vw, 2rem);
    --text-3xl:  clamp(1.875rem, 1.5rem + 2vw, 2.5rem);
    --text-4xl:  clamp(2.25rem, 1.6rem + 3.2vw, 3.4rem);
    --text-5xl:  clamp(2.75rem, 1.8rem + 4.5vw, 4.25rem);

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    --tracking-tight:  -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.02em;
    --tracking-wider:  0.06em;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ===== Radius ===== */
    --radius-2xs:  2px;        /* scrollbars, dividers, sub-element corners */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-pill: 999px;
    --radius-circle: 50%;      /* perfect circles — avatars, dots, FABs */

    /* ===== Shadow scale ===== */
    --shadow-xs:  0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm:  0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md:  0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 6px -2px rgba(15, 23, 42, .05);
    --shadow-lg:  0 12px 28px -8px rgba(15, 23, 42, .14), 0 4px 12px -4px rgba(15, 23, 42, .08);
    --shadow-xl:  0 24px 56px -16px rgba(15, 23, 42, .22), 0 8px 20px -6px rgba(15, 23, 42, .10);
    --shadow-modal: 0 30px 70px -20px rgba(15, 15, 25, .4), 0 8px 24px rgba(15, 15, 25, .14);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 24%, transparent);

    /* ===== Motion ===== */
    --ease-standard:  cubic-bezier(.22, 1, .36, 1);
    --ease-emphasized: cubic-bezier(.34, 1.56, .64, 1);
    --ease-in-out:    cubic-bezier(.4, 0, .2, 1);

    --duration-instant: 80ms;
    --duration-fast:    180ms;
    --duration-base:    280ms;
    --duration-slow:    420ms;
    --duration-slower:  640ms;

    /* ===== Z-index scale ===== */
    --z-base:    1;
    --z-raised:  10;
    --z-sticky:  100;
    --z-overlay: 900;
    --z-modal:   1000;
    --z-toast:   1100;
    --z-top:     9999;

    /* ===== Social / messaging platform brand colors =====
       Used by share buttons and the messaging hub. These are external
       brand identities — they don't change with our theme palette. */
    --color-whatsapp:        #25D366;
    --color-whatsapp-hover:  #1fb855;
    --color-telegram:        #0088cc;
    --color-telegram-hover:  #006da3;
    --color-facebook:        #1877f2;
    --color-twitter:         #000000;
    --color-youtube:         #c4302b;
    --color-instagram:       #c32aa3;
    --color-linkedin:        #0077b5;
    --color-tripadvisor:     #34e0a1;

    /* ===== Reveal / scroll motion =====
       The single source of truth for in-view animations theme-wide.
       Used by .reveal[data-reveal="..."] in css/motion.css and
       js/scroll-reveal.js (IntersectionObserver). Tune here, every
       block's enter/exit animation updates.

       Distances are smaller and durations longer than typical "wow" libraries
       — the goal is "content has settled into place" rather than "look at me
       animating." The fade carries most of the perceived motion; the slight
       translate adds direction without drawing attention. */
    --reveal-distance:    16px;     /* translateY for "up" reveal — subtle */
    --reveal-distance-sm: 8px;      /* child items in staggers */
    --reveal-distance-lg: 32px;     /* hero-level reveals */
    --reveal-scale:       0.985;    /* starting scale for "scale" — barely off */

    /* Opacity fades a touch slower than transform so the fade-in feels
       continuous after the element has settled. Two separate values let
       motion.css drive transform/opacity independently. */
    --reveal-duration:        900ms;
    --reveal-duration-fade:   1100ms;
    --reveal-duration-lg:     1200ms;
    --reveal-duration-fade-lg:1400ms;

    /* Ultra-gentle ease-out — almost linear at the very start, decelerating
       into rest. Avoids the "snap, glide" feel of stiffer curves. */
    --reveal-ease:        cubic-bezier(.16, 1, .3, 1);
    --reveal-ease-fade:   cubic-bezier(.4, 0, .2, 1);

    --reveal-stagger:     90ms;     /* delay between consecutive children */
    --reveal-stagger-lg:  160ms;    /* slower stagger for hero / showcase rows */

    /* ===== Card surface — universal card chrome =====
       .card-surface (and any block visually behaving as a card) reads
       these so every "card" across rooms, blog, travel guide, blocks
       feels like the same component family. */
    --card-bg:           var(--color-white, #ffffff);
    --card-border:       1px solid var(--color-border, #e2e8f0);
    --card-radius:       var(--radius-lg, 16px);
    --card-radius-sm:    var(--radius-md, 12px);
    --card-pad:          var(--space-6, 24px);
    --card-pad-sm:       var(--space-4, 16px);
    --card-pad-lg:       var(--space-7, 32px);
    --card-gap:          var(--space-4, 16px);
    --card-shadow:       var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04));
    --card-shadow-hover: var(--shadow-lg, 0 12px 28px -8px rgba(15, 23, 42, .14), 0 4px 12px -4px rgba(15, 23, 42, .08));
    --card-hover-lift:   -4px;
    --card-transition:   transform var(--duration-base, 280ms) var(--ease-standard, cubic-bezier(.22, 1, .36, 1)),
                         box-shadow var(--duration-base, 280ms) var(--ease-standard, cubic-bezier(.22, 1, .36, 1)),
                         border-color var(--duration-fast, 180ms) ease;

    /* ===== Menu surface — shared dropdown / popover styling =====
       Used by .select-box__menu (header language switcher), the room
       share dropdown (.room-detail__share-menu), and any other small
       floating panel. Tune here, every dropdown updates. */
    --menu-bg:           var(--color-white, #ffffff);
    --menu-fg:           var(--color-fg-strong, #2b2b2b);
    --menu-border:       1px solid var(--color-border-soft, #ececec);
    --menu-radius:       var(--radius-md, 12px);
    --menu-pad:          var(--space-1, 6px);
    --menu-shadow:       var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, .12));
    --menu-min-width:    200px;
    --menu-offset:       8px;
    --menu-z:            var(--z-modal, 1000);

    /* Menu items inherit from these */
    --menu-item-pad-y:   9px;
    --menu-item-pad-x:   12px;
    --menu-item-gap:     10px;
    --menu-item-radius:  var(--radius-sm, 8px);
    --menu-item-font:    .9rem;
    --menu-item-fg:      var(--color-fg, #333);
    --menu-item-fg-hover:var(--color-fg-strong, #1a1a1a);
    --menu-item-bg-hover:color-mix(in srgb, var(--color-fg, #0f172a) 6%, transparent);
    --menu-item-icon-fg: var(--color-fg-subtle, #777);
    --menu-item-icon-w:  16px;
    --menu-item-bg-active: color-mix(in srgb, var(--brand-pri, #3264f5) 10%, var(--color-white, #fff));
    --menu-item-fg-active: var(--brand-pri, #3264f5);

    /* Entrance animation */
    --menu-enter-duration: var(--duration-fast, 200ms);
    --menu-enter-ease:     var(--ease-standard, cubic-bezier(.22, 1, .36, 1));
    --menu-enter-distance: -4px;

    /* ===== Form input tokens ===== */
    --field-bg:           var(--color-white);
    --field-fg:           var(--color-fg);
    --field-border:       var(--color-border);
    --field-border-hover: var(--color-border-strong);
    --field-border-focus: var(--color-primary);
    --field-radius:       10px;
    --field-pad-y:        12px;
    --field-pad-x:        14px;
    --field-font:         var(--text-sm);
    --field-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);
    --field-error:        var(--color-danger);
    --field-error-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 14%, transparent);
}