/* ════════════════════════════════════════════════════════════
   BluCruise Design System — variables.css
   Single source of truth for every token on the platform.
   Every other CSS file imports this or assumes it is loaded first.
   Never define a colour, font, shadow or spacing value anywhere else.
════════════════════════════════════════════════════════════ */

:root {

  /* ── Palette ─────────────────────────────────────────────── */
  --ink:      #060F1C;   /* deepest dark, hero backgrounds      */
  --navy:     #1B2D4F;   /* primary brand dark, card text       */
  --mid:      #243B63;   /* marquee, mid-tone dark sections     */
  --coral:    #E8503A;   /* primary accent, CTAs, highlights    */
  --coral-h:  #C93D29;   /* coral hover state                   */
  --gold:     #C49A2A;   /* secondary accent, search, labels    */
  --gold-h:   #D4A93A;   /* gold hover state                    */
  --cream:    #F4EFE6;   /* warm light background               */
  --crmd:     #EAE4D8;   /* slightly darker cream, alt sections */
  --white:    #FFFFFF;

  /* ── Text ───────────────────────────────────────────────── */
  --tx1:  #111827;       /* primary text                        */
  --tx2:  #374151;       /* secondary text                      */
  --tx3:  #6B7280;       /* muted / caption text                */
  --tx4:  #9CA3AF;       /* very muted, form labels             */
  --txd:  rgba(255,255,255,.72);  /* dark-bg body text          */
  --txm:  rgba(255,255,255,.45);  /* dark-bg muted text         */

  /* ── Borders ────────────────────────────────────────────── */
  --br:      #DDD5C4;    /* default border                      */
  --br-dark: rgba(255,255,255,.10);  /* border on dark bg       */

  /* ── Elevation / shadows ────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.20);

  /* ── Border radii ───────────────────────────────────────── */
  --rad-sm:  6px;        /* badges, pills, small chips         */
  --rad:     8px;        /* buttons, inputs                    */
  --rad-md:  12px;       /* smaller cards                      */
  --rad-lg:  16px;       /* cards                              */
  --rad-xl:  20px;       /* search panel, large containers     */

  /* ── Spacing scale (8pt grid) ───────────────────────────── */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-s: 'Cormorant Garamond', Georgia, serif;
  --font-n: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:     cubic-bezier(.25,.46,.45,.94);
  --trans:    .18s ease;
  --trans-md: .25s ease;

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-base:    1;
  --z-above:  10;
  --z-nav:    30;
  --z-panel:  40;
  --z-modal: 100;
  --z-toast: 200;

  /* ── Homepage compatibility aliases (ADR-008) ───────────────
     index.html previously defined its own duplicate token block.
     22 of 24 values were byte-identical to the ones above; these
     are the two that were not, plus the short aliases the page
     used. Retained so the homepage renders pixel-identically
     after migrating onto this file. Do not use in new code. */
  --glt:   #D4A843;      /* homepage gold-light, 1 digit from --gold-h */
  --rad-lg-home: 14px;   /* homepage card radius (system uses 16px)    */
  --crl:   var(--coral-h);
  --s:     var(--font-s);
  --n:     var(--font-n);
  --shadow-md: var(--shadow);

  /* ── Breakpoints (documented constants) ─────────────────────
     Custom properties cannot be used inside @media queries, so
     these are reference values, not live tokens. The platform
     uses these five widths and no others. */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1400px;

  /* ── Legal / neutral greys ──────────────────────────────────
     Used by privacy, terms and cookies pages. */
  --gray-50:  #F5F6F8;
  --gray-100: #E8EAED;
  --gray-400: #9BA3AF;
}