/* ============================================================
   BRAND TOKENS  —  edit this file to rebrand the entire site
   ============================================================
   Every colour, font and spacing value used anywhere on the site
   is defined here. Change a value once and it updates everywhere.

   The starting palette is drawn from the Oceano mosaic sign:
   cobalt + navy tesserae, turquoise water bands, sea-glass white,
   palm green, and the terracotta floor tile found in both houses.

   >>> REPLACE THESE WITH YOUR REAL BRAND COLOURS WHEN READY. <<<
   ============================================================ */

:root {
  /* ---- Core brand palette ------------------------------- */
  --c-navy:        #0C2C45;   /* darkest mosaic tile — headings, footer */
  --c-cobalt:      #0F5C8C;   /* primary brand blue — buttons, links   */
  --c-cobalt-dark: #0A466C;   /* hover/pressed state                    */
  --c-turquoise:   #1E9BAE;   /* secondary accent — Oceano              */
  --c-aqua:        #7FCBD6;   /* light accent, dividers                 */
  --c-palm:        #3F7A4E;   /* palm green — Paradise Cove accent      */
  /* Deepened from the raw tile colour (#B4603C) so white button text
     clears WCAG AA — the original gave only 4.49:1. This gives 5.2:1. */
  --c-terracotta:  #A85535;   /* floor tile — warm CTA / Jeep accent    */
  --c-terracotta-dark: #8E4629;
  --c-sand:        #F4EDE3;   /* warm neutral background                */
  --c-shell:       #FBF8F4;   /* lightest surface                       */
  --c-white:       #FFF;

  /* ---- Semantic tokens (use these in components) -------- */
  --bg-page:       var(--c-shell);
  --bg-surface:    var(--c-white);
  --bg-sunk:       var(--c-sand);
  --bg-inverse:    var(--c-navy);

  --text-strong:   #0B2233;   /* 14.9:1 on --c-shell  */
  --text-body:     #33475A;   /*  7.7:1 on --c-shell  */
  --text-muted:    #5A6B7B;   /*  4.9:1 on --c-shell  */
  --text-on-dark:  #EEF4F8;   /* 13.4:1 on --c-navy   */
  --text-on-dark-muted: #B4C6D3; /* 7.4:1 on --c-navy */

  --accent:        var(--c-cobalt);
  --accent-hover:  var(--c-cobalt-dark);
  --accent-warm:   var(--c-terracotta);

  --border:        #DFD6C8;
  --border-strong: #C3B7A5;
  --focus-ring:    #B4603C;   /* high contrast against blues + sand */

  --ok:            #2C6E49;
  --warn:          #9A6215;
  --danger:        #A3341F;

  /* ---- Per-property accents ----------------------------- */
  --oceano-accent:  var(--c-turquoise);
  --oceano-deep:    var(--c-navy);
  --cove-accent:    var(--c-palm);
  --cove-deep:      #14432A;

  /* ---- Typography --------------------------------------- */
  /* Display: Marcellus — a refined Roman with hospitality manners, replacing
     Fraunces (Sept 2026). Fraunces was warm and characterful; the brief was
     "eloquent and classy", and Marcellus is quieter and more formal without
     tipping into wedding-stationery.
     Script: Great Vibes — the brand wordmark ONLY. See the warning below.
     Body: Inter — neutral, excellent small, huge language coverage.          */
  --font-display: "Marcellus", "Iowan Old Style", Georgia, serif;
  --font-script:  "Great Vibes", "Snell Roundhand", cursive;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ⚠️ --font-script is for the word "Shores" in the logo and nothing else.
     Great Vibes has no bold, no small sizes worth reading, and its capitals
     are ambiguous out of context — "OF VIEQUES" set in it is genuinely hard
     to read. Every other elegant impulse belongs to --font-display. */

  --fs-xs:   0.8125rem;  /* 13px — labels, captions only        */
  --fs-sm:   0.9375rem;  /* 15px                                */
  --fs-base: 1.0625rem;  /* 17px — body, never below 16px       */
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  clamp(2.5rem, 6vw, 4.5rem);   /* hero             */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --ls-wide: 0.14em;   /* eyebrow / overline text */

  /* ---- Spacing scale (4px base) ------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Radius, shadow, motion --------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(12, 44, 69, 0.06),
              0 2px 8px rgba(12, 44, 69, 0.05);
  --shadow-2: 0 2px 4px rgba(12, 44, 69, 0.07),
              0 8px 24px rgba(12, 44, 69, 0.09);
  --shadow-3: 0 8px 16px rgba(12, 44, 69, 0.10),
              0 24px 48px rgba(12, 44, 69, 0.13);

  /* Motion tokens: short for feedback, longer for travel.
     Exits run faster than entrances so the UI feels responsive. */
  --dur-fast:  120ms;
  --dur-mid:   240ms;
  --dur-slow:  420ms;
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ------------------------------------------- */
  --container:      1240px;
  --container-text: 68ch;   /* keeps prose at a readable measure */
  --header-h:       76px;

  /* ---- Z-index scale ------------------------------------ */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-header:  40;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* Slightly tighter header on small screens */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
}