/* ============================================================
   BREAKPOINT CONTRACT  (do not change without updating HANDOFF.md)

     Phone:   max-width: 809.98px      (390 px is the design-preview target)
     Tablet:  810px – 1279.98px
     Desktop: min-width: 1280px

   All @media queries in components.css / animations.css use the
   raw px values above — no SCSS, no preprocessing. The --bp-* tokens
   below exist for human reference only.
   ============================================================

   tokens.css — Mahorčič design system
   Source of truth: Framer export (mahorcic.com) — extracted 2026-05-10
   ============================================================ */

:root {
  /* ─── Colors ─── */
  --color-bg:            #0a0b0a;
  --color-surface:       #141512;
  --color-surface-2:     #1c1b18;

  --color-cream:         #efe7d2;
  --color-cream-dim:     rgba(239, 231, 210, 0.55);
  --color-cream-faint:   rgba(239, 231, 210, 0.28);

  --color-gold:          #cfbe91;
  --color-gold-dim:      rgba(207, 190, 145, 0.55);

  --color-blue:          #0071e3;
  --color-blue-hover:    #0077ed;
  --color-blue-dim:      rgba(0, 113, 227, 0.12);

  --color-green:         #22a855;

  --color-border:        rgba(239, 231, 210, 0.08);
  --color-border-hover:  rgba(239, 231, 210, 0.18);

  /* Brand / award accents */
  --color-bib-red:       rgb(216, 0, 39);
  --color-michelin-gold: rgb(226, 166, 0);
  --color-flag-blue:     rgb(0, 82, 180);
  --color-flag-green:    rgb(0, 150, 57);

  /* ─── Typography ─── */
  --font-sans:           'Barlow', system-ui, -apple-system, sans-serif;
  --font-semi-condensed: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --font-condensed:      'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --font-display:        'Forum', 'Times New Roman', Georgia, serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale (fluid clamp where it matters) */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.0625rem;   /* 17 — booking drawer body */
  --fs-lg:   1.125rem;    /* 18 */
  --fs-xl:   1.25rem;     /* 20 */
  --fs-2xl:  1.5rem;      /* 24 */
  --fs-3xl:  2rem;        /* 32 */
  --fs-4xl:  2.5rem;      /* 40 */
  --fs-display:  clamp(2.5rem, 6vw, 5rem);
  --fs-display-l: clamp(3.5rem, 9vw, 8rem);

  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em;
  --tracking-tight: -0.02em;
  --tracking-display: -0.04em;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.5;
  --leading-loose: 1.65;

  /* ─── Spacing ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─── Radius ─── */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  36px;     /* nav pill */
  --radius-pill: 999px;

  /* ─── Motion ─── */
  --ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 2.2);  /* Apple/macOS bounce */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    480ms;
  --dur-slower:  800ms;

  /* Stagger system (replaces Framer's inconsistent delays) */
  --stagger-letter: 30ms;
  --stagger-word:   80ms;
  --stagger-line:   140ms;
  --stagger-card:   100ms;

  /* ─── Shadows ─── */
  --shadow-card:  0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  --shadow-soft:  0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-deep:  0 24px 64px rgba(0, 0, 0, 0.4);

  /* ─── Layout ─── */
  --container-max: 1440px;
  --container-px:  clamp(20px, 5vw, 80px);

  /* Breakpoints (used in @media — values for reference) */
  --bp-phone:   810px;   /* phone <= 809.98 */
  --bp-tablet:  1280px;  /* tablet 810–1279.98 */
                          /* desktop >= 1280 */

  /* ─── Booking drawer ─── */
  --tourist-tax-pp: 2.40; /* EUR per person per night */

  /* Room swatches (linear-gradients) */
  --gradient-blue:     linear-gradient(135deg, #08101e, #0d2040, #1a3568);
  --gradient-superior: linear-gradient(135deg, #130802, #2a1204, #5a2c08);
  --gradient-unique:   linear-gradient(135deg, #0d0a06, #1a1408, #3a2e1a);

  /* ─── Calendar accent (blue-only across all rooms) ─── */
  --cal-range:         rgba(0, 113, 227, 0.22);
  --cal-selected:      #0071e3;
  --cal-selected-text: #fff;
  --cal-pill-border:   rgba(0, 113, 227, 0.42);
  --cal-pill-bg:       rgba(0, 113, 227, 0.10);
  --cal-guest-bg:      rgba(0, 113, 227, 0.14);
  --cal-guest-fg:      #fff;
}

/* Dark theme is the default. Light-mode overrides go here later if needed. */
@media (prefers-color-scheme: light) {
  /* Mahorčič intentionally dark across all schemes — no overrides */
}

/* Reduced motion — collapse all stagger + transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --stagger-letter: 0ms;
    --stagger-word:   0ms;
    --stagger-line:   0ms;
    --stagger-card:   0ms;
    --dur-fast:   1ms;
    --dur-base:   1ms;
    --dur-slow:   1ms;
    --dur-slower: 1ms;
  }
}