/* ============================================
   CALENDAR THEME TOKENS — CORE
   Extracted from calendar-themes.css (:root only)
   ============================================ */

: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)
  );
}