/* ==========================================================================
   Open Tickets theme - design tokens
   Every colour, type size, radius, spacing, motion and backdrop value used by
   theme.css lives here. Retheme by editing this file only.
   Values: "Cinematic spec - FINAL" (notes.md) + reviews/2026-10-28 chatgpt-reply-cinematic.md B, C, D.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces (dark charcoal, not flat black) ---- */
  --ot-color-page: #0C0F14;        /* page background */
  --ot-color-raised: #141922;      /* header, footer, offcanvas, controls over posters */
  --ot-color-card: #1A202B;        /* cards, panels */
  --ot-color-divider: #343D4B;     /* borders, dashed dividers (not enough as an input boundary on its own) */

  /* ---- Colour: text ---- */
  --ot-color-text: #F4F5F7;            /* primary text (17.60 on page, 16.15 on raised, 14.98 on card) */
  --ot-color-text-secondary: #B4BAC5;  /* secondary text, meta (9.84 / 9.04 / 8.38) */

  /* ---- Colour: brand / actions ---- */
  --ot-color-primary: #BE3549;         /* red date block, primary action (white on red 5.53) */
  --ot-color-primary-hover: #A82B3E;   /* hover / active (white on hover 6.82) */
  --ot-color-on-primary: #FFFFFF;      /* text on red */

  /* ---- Colour: states ---- */
  --ot-color-focus: #86C5FF;           /* focus ring everywhere, incl. dark header controls */
  --ot-color-info-bg: #142D40;         /* booking notice background */
  --ot-color-info-text: #A8DEFF;       /* booking notice text (9.84) */
  --ot-color-success-bg: #163529;
  --ot-color-success-text: #B6E6CA;    /* (9.62) */

  /* ---- Colour: derived (kept as tokens so they can be retuned) ---- */
  --ot-color-input-bg: #0C0F14;                 /* search field on the raised header */
  --ot-color-input-border: #4A5468;             /* visible input boundary (divider alone is too weak) */
  --ot-color-input-placeholder: #8E96A5;
  --ot-color-overlay-page: rgb(12 15 20 / 50%);      /* page-colour overlay over the hero backdrop (50 %: lower = more poster colour) */
  --ot-color-control-backing: rgb(20 25 34 / 92%);   /* opaque dark backing for arrows and dots over posters */
  --ot-color-shadow: rgb(0 0 0 / 35%);          /* neutral shadow, no colour tint */

  /* ---- Typography ---- */
  --ot-font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ot-heading-tracking: -0.02em;

  /* Type scale: desktop (>= 992px) / mobile (< 768px); clamp() interpolates between 768 and 992px. */
  --ot-fs-hero-title: clamp(1.875rem, calc(1.875rem + 18 * ((100vw - 48rem) / 224)), 3rem);   /* 48 / 30, 700, 1.15 */
  --ot-lh-hero-title: 1.15;
  --ot-fs-h1: clamp(1.75rem, calc(1.75rem + 12 * ((100vw - 48rem) / 224)), 2.5rem);           /* 40 / 28, 700, 1.20 */
  --ot-lh-h1: 1.2;
  --ot-fs-h2: clamp(1.4375rem, calc(1.4375rem + 5 * ((100vw - 48rem) / 224)), 1.75rem);       /* 28 / 23, 600, 1.25 */
  --ot-lh-h2: 1.25;
  --ot-fs-card-title: clamp(1.125rem, calc(1.125rem + 2 * ((100vw - 48rem) / 224)), 1.25rem); /* 20 / 18, 600, 1.35 */
  --ot-lh-card-title: 1.35;
  --ot-fs-body: 1rem;        /* 16, 400, 1.60 */
  --ot-lh-body: 1.6;
  --ot-fs-meta: 0.875rem;    /* 14, 400, 1.50 */
  --ot-lh-meta: 1.5;
  --ot-fs-date-day: 1.375rem;   /* red date block */
  --ot-fs-date-month: 0.75rem;
  --ot-fw-regular: 400;
  --ot-fw-medium: 500;
  --ot-fw-semibold: 600;
  --ot-fw-bold: 700;

  /* ---- Radii ---- */
  --ot-radius-sm: 6px;
  --ot-radius: 12px;
  --ot-radius-lg: 16px;
  --ot-radius-pill: 999px;

  /* ---- Spacing ---- */
  --ot-space-1: 0.25rem;
  --ot-space-2: 0.5rem;
  --ot-space-3: 0.75rem;
  --ot-space-4: 1rem;
  --ot-space-5: 1.5rem;
  --ot-space-6: 2rem;
  --ot-space-7: 3rem;
  --ot-space-8: 4rem;
  --ot-gutter: 1rem;           /* page side gutter (16px) on phones */
  --ot-container-max: 1320px;

  /* ---- Header (fixed, shrinks on scroll; body reserves the expanded height) ---- */
  --ot-header-height: 76px;            /* desktop, expanded */
  --ot-header-height-compact: 60px;    /* desktop, after scrolling */
  --ot-header-row: 60px;               /* mobile row 1 (logo + menu) */
  --ot-header-search-row: 56px;        /* mobile row 2 (full-width search) */
  --ot-search-max: 520px;
  --ot-search-height: 44px;

  /* ---- Hero ---- */
  --ot-hero-max-width: 1210px;         /* real banners are 1210 x 450: never stretched beyond their size */
  --ot-hero-ratio: 1210 / 450;         /* stage ratio; posters sit inside with object-fit: contain, never cropped */
  --ot-hero-peek-scale: 0.92;          /* neighbour posters (>= 1200px only) */
  --ot-hero-peek-opacity: 0.55;
  --ot-hero-control-size: 44px;

  /* ---- Backdrop (decorative, aria-hidden, clipped) ---- */
  --ot-backdrop-blur: 32px;
  --ot-backdrop-scale: 1.08;
  --ot-backdrop-overlay: var(--ot-color-overlay-page);
  --ot-backdrop-fade-start: 55%;       /* from here the overlay fades into the solid page colour, so the hero has no hard bottom edge */

  /* ---- Focus ---- */
  --ot-focus-width: 3px;
  --ot-focus-offset: 3px;

  /* ---- Shadows ---- */
  --ot-shadow-card: 0 10px 28px var(--ot-color-shadow);
  --ot-shadow-card-hover: 0 14px 34px var(--ot-color-shadow);
  --ot-shadow-header: 0 1px 0 var(--ot-color-divider);

  /* ---- Motion ---- */
  --ot-dur-button: 160ms;              /* button colour */
  --ot-dur-card: 180ms;                /* card inner-wrapper lift */
  --ot-dur-header: 180ms;              /* header shrink padding */
  --ot-dur-poster: 240ms;              /* poster crossfade */
  --ot-dur-backdrop: 320ms;            /* backdrop crossfade, poster scale .99 -> 1 */
  --ot-ease-card: cubic-bezier(.2, .8, .2, 1);
  --ot-ease-out: ease-out;
  --ot-card-lift: -3px;
  --ot-poster-scale-from: 0.99;
}

/* Reduced motion: everything instant, no scale / lift / crossfade / smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ot-dur-button: 0ms;
    --ot-dur-card: 0ms;
    --ot-dur-header: 0ms;
    --ot-dur-poster: 0ms;
    --ot-dur-backdrop: 0ms;
    --ot-card-lift: 0px;
    --ot-poster-scale-from: 1;
  }
}

/* ---- Step 4b: seating-map concept (concepts/seating-appel.html) ---- */
:root {
  --ot-color-seat-available: #6FA8DC;          /* Reserved Seating, available (6.5:1 on card) */
  --ot-color-seat-hover-stroke: var(--ot-color-text);
  --ot-color-seat-selected: var(--ot-color-primary);           /* selected seat: red with a white check and white edge */
  --ot-color-seat-selected-mark: var(--ot-color-on-primary);
  --ot-color-seat-unavailable: #2A313D;        /* unavailable (sample data): dim seat with an X */
  --ot-color-seat-unavailable-mark: #8E96A5;
  --ot-color-standing: #4FBFA8;                /* standing area edge + legend (7.9:1 on card) */
  --ot-color-standing-fill: rgb(79 191 168 / 16%);
  --ot-color-stage: var(--ot-color-divider);
  --ot-color-concept-bg: #3A2C0E;              /* "Concept - sample layout" banner (text 9.9:1) */
  --ot-color-concept-text: #FFD88A;
  --ot-color-concept-border: #8A6A1F;
  --ot-seat-focus-width: 3px;                  /* focus ring around a seat, in screen pixels */
}