/* ============================================================
   SIPADAN.COM — DESIGN TOKENS · "REFINED COASTAL PREMIUM"
   One modern 2025/26 direction: light/white base, warm-sand
   bands, deep navy type, ocean-teal cool accent, restrained
   brass-gold reserved for the primary CTA, hairlines and small
   highlights. Same skeleton, new skin.
   Single source of truth — no template hardcodes any value.
   ============================================================ */
:root {

  /* ---- Core palette ---- */
  --c-navy:       #0e2a44;  /* deep navy — text, headings, key UI      */
  --c-deep:       #0a1f33;  /* darkest water — footer surface           */
  --c-teal:       #12a3b8;  /* ocean teal — the ONE blue/cool accent    */
  --c-teal-dark:  #0e828f;  /* teal hover / pressed                     */
  --c-gold:       #b5924e;  /* brass — primary CTA, hairlines, accents  */
  --c-gold-dark:  #9a7a3c;  /* hover FILL only */
  --c-gold-text:  #856831;  /* brass for TEXT — AA on white AND sand */
  --c-sand:       #f7f2e9;  /* warm sand — alternating section bands    */
  --c-white:      #ffffff;  /* base                                     */

  /* ---- Semantic button roles (meaning preserved) ----
     All three carry deep-navy text: AA contrast on every fill,
     and hover shifts BACKGROUND only (text colour fixed).      */
  --c-btn-book:        #f0a04a;   /* warm orange (lighter) = CTA / 254 pill */
  --c-btn-border:      #cf7f28;   /* orange border for definition */
  --c-btn-book-hover:  #e78f34;
  --c-btn-call:        #8ec9df;         /* airy blue = call (teal family) */
  --c-btn-call-hover:  #76bcd6;
  --c-btn-wa:          #34c06b;         /* recognizably WhatsApp green    */
  --c-btn-wa-hover:    #27ab5b;

  /* ---- Functional derivatives ---- */
  --c-ink:        #21313f;  /* body text (AA on white and sand)         */
  --c-ink-soft:   #5b6a76;  /* secondary text, captions                 */
  --c-hairline:   #e8e1d2;  /* light hairline on white/sand             */
  --c-hairline-gold: rgba(181,146,78,0.38); /* thin gold divider        */
  --c-surface-2:  #fcfaf5;  /* raised warm white (fly-out, review bg)   */
  --c-tint-teal:  #edf6f7;  /* faint teal wash (hover states)           */
  --c-star:       #c9a45c;  /* rating stars — brass family              */
  --c-success:    #1d7a4f;
  --c-error:      #b3261e;

  /* ---- Header band (kept): watery teal photo + seamless fallback ---- */
  --c-band-top:   #4897a6;
  --c-band-mid:   #68b0b3;
  --c-band-bot:   #5aa8b2;
  --c-band-fall:  #66aab2;

  /* ---- Type: Fraunces display serif + Source Sans Pro body ----
     Fraunces is Latin-scoped: CN/RU glyphs fall back per-glyph to
     Source Sans Pro -> system sans, so non-Latin builds never break. */
  --font-sans: 'Source Sans Pro', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Source Sans Pro', -apple-system, 'Segoe UI', Arial, serif;

  /* Size floors (deliberate): body >=17px; ONLY the copyright line is 16px */
  --fs-xs:   1.0625rem;   /* 17px — floor applies to ALL content */
  --fs-sm:   1.0625rem;   /* 17px — secondary text */
  --fs-base: 1.0625rem;   /* 17px — body */
  --fs-md:   1.1875rem;   /* 19px */
  --fs-lg:   1.5rem;      /* 24px — h3 */
  --fs-xl:   2rem;        /* 32px — h2 */
  --fs-2xl:  clamp(2.25rem, 1.4rem + 3.2vw, 3.25rem); /* h1 — confident */
  --fs-btn-m: 1.125rem;   /* 18px — mobile buttons */
  --lh-body: 1.75;
  --lh-tight: 1.12;
  --fw-reg:  400;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---- Spacing scale (more air = the luxury) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* ---- Shape: calm large radius ---- */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 20px;
  --radius-btn: 12px;     /* buttons: rounded, not pill */
  --radius-pill: 999px;   /* pills (254) only */

  /* ---- Elevation: barely-there, layered ---- */
  --shadow-sm: 0 1px 2px rgba(14,42,68,0.04), 0 3px 10px rgba(14,42,68,0.05);
  --shadow:    0 2px 6px rgba(14,42,68,0.05), 0 12px 28px rgba(14,42,68,0.08);
  --shadow-lg: 0 8px 20px rgba(14,42,68,0.09), 0 28px 60px rgba(14,42,68,0.14);
  --shadow-lift: 0 6px 14px rgba(14,42,68,0.07), 0 18px 40px rgba(14,42,68,0.10);
  --glow-gold: 0 8px 24px rgba(232,145,60,0.38);

  /* ---- Layout ---- */
  --container-max: 1180px;
  --sidebar-w: 260px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --bp-tablet: 600px;
  --bp-desktop: 1024px;   /* tablets use the hamburger */
  --header-h: 64px;

  /* ---- Motion (transform/opacity only; global reduced-motion kill) ---- */
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
}