/* ============================================
   CALENDAR THEME TOKENS
   Base design language + warm variants
   ============================================ */

/* --------------------------------------------
   Core design tokens (base / neutral theme)
   -------------------------------------------- */
:root {
  /* ---- Colour primitives ---- */
  --color-bg-page: #050509;
  --color-bg-image-overlay: rgba(0, 0, 0, 0.55);

  --color-surface-glass: rgba(255, 255, 255, 0.08);
  --color-surface-nav: rgba(12, 12, 18, 0.96);
  --color-surface-filters-top: rgba(12, 12, 18, 0.96);
  --color-surface-filters-bottom: #050509;
  --color-surface-day-header: rgba(15, 15, 24, 0.96);
  --color-surface-date: rgba(8, 8, 15, 0.98);
  --color-surface-date-hover: rgba(22, 22, 32, 0.98);
  --color-surface-modal: rgba(20, 20, 28, 0.95);
  --color-surface-modal-block: rgba(255, 255, 255, 0.05);
  --color-surface-backtohome: rgba(255, 255, 255, 0.1);

  --color-surface-pill-room: #ffffff08;
  --color-surface-pill-room-active: rgba(255, 255, 255, 0.12);
  --color-surface-pill-status-confirmed: #e5e7eb;
  --color-surface-pill-status-provisional-light: #e5e7eb;
  --color-surface-pill-status-provisional-dark: #d1d5db;

  --color-surface-grid-bg: rgba(255, 255, 255, 0.08);
  --color-surface-footer: #000000;

  /* ---- Warning / validation colours ---- */
  --color-warning-text: #ff6b6b;
  --color-warning-bg: rgba(255, 107, 107, 0.12);
  --color-warning-border: #ff6b6b;

  /* ---- Text colours ---- */
  --color-text-primary: #ffffff;
  --color-text-inverse: #000000;
  --color-text-muted: rgba(255, 255, 255, 0.75);
  --color-text-label: rgba(255, 255, 255, 0.7);
  --color-text-status-dark: #111111;

  /* ---- Accent + interactive ---- */
  --color-accent-primary: #ffffff;
  --color-accent-primary-hover: #f3f3f3;
  --color-accent-outline-strong: rgba(255, 255, 255, 0.35);
  --color-accent-outline-subtle: rgba(255, 255, 255, 0.18);
  --color-accent-outline-subtle-strong: rgba(255, 255, 255, 0.38);

  --color-border-glass: rgba(255, 255, 255, 0.15);
  --color-border-nav: rgba(255, 255, 255, 0.16);
  --color-border-filters: rgba(255, 255, 255, 0.12);
  --color-border-date: rgba(255, 255, 255, 0.06);
  --color-border-date-hover: rgba(255, 255, 255, 0.16);
  --color-border-modal-block: rgba(255, 255, 255, 0.1);
  --color-border-footer-top: rgba(255, 255, 255, 0.1);
  --color-border-backtohome: rgba(255, 255, 255, 0.2);

  /* ---- Booking bars ---- */
  --color-booking-bar-text: #ffffff;
  --color-booking-bar-provisional-stripe: rgba(255, 255, 255, 0.5);
  --color-booking-bar-unavailable-dark: #555;
  --color-booking-bar-unavailable-light: #777;

  /* ---- Form controls ---- */
  --color-input-border: #cccccc;
  --color-input-bg: #ffffff;

  /* ---- Shadows ---- */
  --shadow-glass: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-grid: 0 18px 40px rgba(0, 0, 0, 0.65);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-pill-active: 0 0 0 1px var(--color-accent-outline-strong);

  /* ---- Radii ---- */
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-nav: 12px;
  --radius-pill-full: 999px;
  --radius-pill-status: 20px;
  --radius-date: 12px;
  --radius-modal-block: 6px;
  --radius-backtohome: 12px;
  --radius-button: 6px;

  /* ---- Typography ---- */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-body: 1rem;
  --font-size-month-title: 1.3rem;
  --font-size-month-title-mobile: 1rem;
  --font-size-day-name: 0.8rem;
  --font-size-day-name-mobile: 0.7rem;
  --font-size-date-number: 0.9rem;
  --font-size-date-number-mobile: 0.8rem;
  --font-size-pill: 0.8rem;
  --font-size-nav-button: 0.9rem;
  --font-size-nav-button-mobile: 0.75rem;
  --font-size-footer: 1rem;
  --font-size-footer-sub: 0.95rem;
  --font-size-modal-close: 1.6rem;
  --font-size-booking-bar: 0.7rem;
  --font-size-request-btn: 0.9rem;
  --font-size-submit-btn: 16px;

  /* ---- Letter spacing ---- */
  --ls-month-title: 0.04em;
  --ls-day-name: 0.16em;
  --ls-filter-label: 0.1em;
  --ls-footer: 0.5px;
  --ls-footer-sub: 0.6px;
  --ls-request-btn: 0.03em;

  /* ---- Opacity scale ---- */
  --opacity-xxlow: 0.03;
  --opacity-xlow: 0.06;
  --opacity-low: 0.08;
  --opacity-medlow: 0.12;
  --opacity-med: 0.16;
  --opacity-medhigh: 0.35;
  --opacity-high: 0.55;
  --opacity-full: 1;

  /* ---- Layout ---- */
  --calendar-wrapper-width: 75%;
  --calendar-wrapper-max-width: 1400px;
  --calendar-wrapper-padding: 30px;
  --calendar-container-padding: 20px 0 40px;
  --filters-padding: 14px 20px 18px;
  --nav-padding: 16px 20px;
  --footer-padding: 30px 0 40px;
  --backtohome-padding: 14px 20px;

  /* ---- Grid ---- */
  --calendar-row-height: 110px;
  --calendar-row-height-mobile: 90px;
  --calendar-row-height-mobile-sm: 80px;

  /* ---- Transitions ---- */
  --transition-fast: 0.1s ease;
  --transition-med: 0.15s ease;
  --transition-slow: 0.18s ease;
  --transition-fade: 0.2s ease;

  /* Fell icon gradient */
  --color-fell-icon: #ffffff;
  --color-fell-icon-rgb: 255, 255, 255;

  --fell-icon-gradient: linear-gradient(
    to top,
    rgba(var(--color-fell-icon-rgb), 0.4),
    rgba(var(--color-fell-icon-rgb), 0.9)
  );
}

/* ============================================
   THEME: Soft Ember
   Warm, gentle, elegant
   ============================================ */
:root[data-theme="ember"] {
  /* Text */
  --color-text-primary: #f7c9a1;
  --color-text-muted: rgba(247, 201, 161, 0.75);
  --color-text-label: rgba(247, 201, 161, 0.7);

  /* Accents */
  --color-accent-primary: #f7c9a1;
  --color-accent-primary-hover: #f4b98a;
  --color-accent-outline-strong: rgba(247, 201, 161, 0.9);
  --color-accent-outline-subtle: rgba(247, 201, 161, 0.45);
  --color-accent-outline-subtle-strong: rgba(247, 201, 161, 0.75);

  /* Surfaces */
  --color-surface-nav: rgba(32, 18, 12, 0.85);
  --color-surface-filters-top: rgba(32, 18, 12, 0.85);
  --color-surface-filters-bottom: #1a0f0b;
  --color-surface-day-header: rgba(26, 14, 10, 0.96);
  --color-surface-date: rgba(26, 14, 10, 0.96);
  --color-surface-date-hover: rgba(34, 18, 12, 0.98);
  --color-surface-modal: rgba(30, 16, 12, 0.96);

  /* Grid halo */
  --color-surface-grid-bg: rgba(247, 201, 161, 0.18);

  /* Booking bar stripe */
  --color-booking-bar-provisional-stripe: rgba(247, 201, 161, 0.7);
  --color-booking-bar-unavailable-dark: rgba(247, 201, 161, 0.35);
  --color-booking-bar-unavailable-light: rgba(247, 201, 161, 0.55);

  --color-fell-icon: #f7c9a1;
  --color-fell-icon-rgb: 247, 201, 161;
}

/* ============================================
   THEME: Bright Citrus
   Energetic, modern, high contrast
   ============================================ */
:root[data-theme="citrus"] {
  /* Text */
  --color-text-primary: #ff9b42;
  --color-text-muted: rgba(255, 155, 66, 0.75);
  --color-text-label: rgba(255, 155, 66, 0.7);

  /* Accents */
  --color-accent-primary: #ff9b42;
  --color-accent-primary-hover: #ff8a24;
  --color-accent-outline-strong: rgba(255, 155, 66, 0.9);
  --color-accent-outline-subtle: rgba(255, 155, 66, 0.45);
  --color-accent-outline-subtle-strong: rgba(255, 155, 66, 0.75);

  /* Surfaces (very pale orange‑cream) */
  --color-surface-nav: rgba(255, 235, 220, 0.85);
  --color-surface-filters-top: rgba(255, 235, 220, 0.85);
  --color-surface-filters-bottom: #ffe7d4;
  --color-surface-day-header: rgba(255, 240, 230, 0.96);
  --color-surface-date: rgba(255, 240, 230, 0.96);
  --color-surface-date-hover: rgba(255, 232, 220, 0.98);
  --color-surface-modal: rgba(255, 238, 225, 0.96);

  /* Grid halo */
  --color-surface-grid-bg: rgba(255, 155, 66, 0.15);

  /* Booking bar stripe */
  --color-booking-bar-provisional-stripe: rgba(255, 155, 66, 0.6);
  --color-booking-bar-unavailable-dark: rgba(255, 155, 66, 0.35);
  --color-booking-bar-unavailable-light: rgba(255, 155, 66, 0.55);


  --color-fell-icon: #f09628;
  --color-fell-icon-rgb: 240, 150, 40;
}

/* ============================================
   THEME: Burnt Sienna Luxe
   Rich, premium, boutique warmth
   ============================================ */
:root[data-theme="sienna"] {
  /* Text */
  --color-text-primary: #d87a4a;
  --color-text-muted: rgba(216, 122, 74, 0.75);
  --color-text-label: rgba(216, 122, 74, 0.7);

  /* Accents */
  --color-accent-primary: #d87a4a;
  --color-accent-primary-hover: #c96a3a;
  --color-accent-outline-strong: rgba(216, 122, 74, 0.9);
  --color-accent-outline-subtle: rgba(216, 122, 74, 0.45);
  --color-accent-outline-subtle-strong: rgba(216, 122, 74, 0.75);

  /* Surfaces (deep warm browns) */
  --color-surface-nav: rgba(40, 20, 12, 0.85);
  --color-surface-filters-top: rgba(40, 20, 12, 0.85);
  --color-surface-filters-bottom: #2a150d;
  --color-surface-day-header: rgba(34, 17, 10, 0.96);
  --color-surface-date: rgba(34, 17, 10, 0.96);
  --color-surface-date-hover: rgba(44, 22, 14, 0.98);
  --color-surface-modal: rgba(38, 19, 12, 0.96);

  /* Grid halo */
  --color-surface-grid-bg: rgba(216, 122, 74, 0.18);

  /* Booking bar stripe */
  --color-booking-bar-provisional-stripe: rgba(216, 122, 74, 0.7);
  --color-booking-bar-unavailable-dark: rgba(216, 122, 74, 0.35);
  --color-booking-bar-unavailable-light: rgba(216, 122, 74, 0.55);

  --color-fell-icon: #d28c5a;
  --color-fell-icon-rgb: 210, 140, 90;

}

:root[data-theme="apricot"] {
  /* Text */
  --color-text-primary: #ffb98a;
  --color-text-muted: rgba(255, 185, 138, 0.75);
  --color-text-label: rgba(255, 185, 138, 0.7);

  /* Accents */
  --color-accent-primary: #ffb98a;
  --color-accent-primary-hover: #ffab72;
  --color-accent-outline-strong: rgba(255, 185, 138, 0.9);
  --color-accent-outline-subtle: rgba(255, 185, 138, 0.45);
  --color-accent-outline-subtle-strong: rgba(255, 185, 138, 0.75);

  /* Surfaces */
  --color-surface-nav: rgba(255, 240, 230, 0.85);
  --color-surface-filters-top: rgba(255, 240, 230, 0.85);
  --color-surface-filters-bottom: #ffe9dd;
  --color-surface-day-header: rgba(255, 245, 238, 0.96);
  --color-surface-date: rgba(255, 245, 238, 0.96);
  --color-surface-date-hover: rgba(255, 237, 225, 0.98);
  --color-surface-modal: rgba(255, 242, 232, 0.96);

  /* Grid halo */
  --color-surface-grid-bg: rgba(255, 185, 138, 0.15);

  /* Booking bar stripe */
  --color-booking-bar-provisional-stripe: rgba(255, 185, 138, 0.6);
  
  --color-fell-icon: #ffb478;
  --color-fell-icon-rgb: 255, 180, 120;
}

:root[data-theme="amber"] {
  /* Text */
  --color-text-primary: #ff7a1a;
  --color-text-muted: rgba(255, 122, 26, 0.75);
  --color-text-label: rgba(255, 122, 26, 0.7);

  /* Accents */
  --color-accent-primary: #ff7a1a;
  --color-accent-primary-hover: #ff6a00;
  --color-accent-outline-strong: rgba(255, 122, 26, 0.9);
  --color-accent-outline-subtle: rgba(255, 122, 26, 0.45);
  --color-accent-outline-subtle-strong: rgba(255, 122, 26, 0.75);

  /* Surfaces */
  --color-surface-nav: rgba(45, 20, 5, 0.85);
  --color-surface-filters-top: rgba(45, 20, 5, 0.85);
  --color-surface-filters-bottom: #2a1204;
  --color-surface-day-header: rgba(38, 17, 6, 0.96);
  --color-surface-date: rgba(38, 17, 6, 0.96);
  --color-surface-date-hover: rgba(48, 22, 8, 0.98);
  --color-surface-modal: rgba(42, 19, 7, 0.96);

  /* Grid halo */
  --color-surface-grid-bg: rgba(255, 122, 26, 0.18);

  /* Booking bar stripe */
  --color-booking-bar-provisional-stripe: rgba(255, 122, 26, 0.7);

   --color-fell-icon: #ffaa3c;
  --color-fell-icon-rgb: 255, 170, 60;
}

:root[data-theme="honey"] {
  /* Text */
  --color-text-primary: #e8a55c;
  --color-text-muted: rgba(232, 165, 92, 0.75);
  --color-text-label: rgba(232, 165, 92, 0.7);

  /* Accents */
  --color-accent-primary: #e8a55c;
  --color-accent-primary-hover: #d89548;
  --color-accent-outline-strong: rgba(232, 165, 92, 0.9);
  --color-accent-outline-subtle: rgba(232, 165, 92, 0.45);
  --color-accent-outline-subtle-strong: rgba(232, 165, 92, 0.75);

  /* Surfaces */
  --color-surface-nav: rgba(36, 22, 10, 0.85);
  --color-surface-filters-top: rgba(36, 22, 10, 0.85);
  --color-surface-filters-bottom: #24160a;
  --color-surface-day-header: rgba(30, 18, 8, 0.96);
  --color-surface-date: rgba(30, 18, 8, 0.96);
  --color-surface-date-hover: rgba(40, 24, 12, 0.98);
  --color-surface-modal: rgba(34, 20, 10, 0.96);

  /* Grid halo */
  --color-surface-grid-bg: rgba(232, 165, 92, 0.18);

  /* Booking bar stripe */
  --color-booking-bar-provisional-stripe: rgba(232, 165, 92, 0.7);

  --color-fell-icon: #e6a046;
  --color-fell-icon-rgb: 230, 160, 70;
}

:root[data-theme="tangerine"] {
  /* Text */
  --color-text-primary: #ff8f3f;
  --color-text-muted: rgba(255, 143, 63, 0.75);
  --color-text-label: rgba(255, 143, 63, 0.7);

  /* Accents */
  --color-accent-primary: #ff8f3f;
  --color-accent-primary-hover: #ff7d24;
  --color-accent-outline-strong: rgba(255, 143, 63, 0.9);
  --color-accent-outline-subtle: rgba(255, 143, 63, 0.45);
  --color-accent-outline-subtle-strong: rgba(255, 143, 63, 0.75);

  /* Surfaces (lightest of all themes) */
  --color-surface-nav: rgba(255, 245, 238, 0.85);
  --color-surface-filters-top: rgba(255, 245, 238, 0.85);
  --color-surface-filters-bottom: #fff2e8;
  --color-surface-day-header: rgba(255, 250, 245, 0.96);
  --color-surface-date: rgba(255, 250, 245, 0.96);
  --color-surface-date-hover: rgba(255, 242, 230, 0.98);
  --color-surface-modal: rgba(255, 248, 240, 0.96);

  /* Grid halo */
  --color-surface-grid-bg: rgba(255, 143, 63, 0.15);

  /* Booking bar stripe */
  --color-booking-bar-provisional-stripe: rgba(255, 143, 63, 0.6);

  --color-fell-icon: #ff823c;
  --color-fell-icon-rgb: 255, 130, 60;

}