/* =========================================================================
   Riviera Boracay — brand tokens (identity "H1", October 2026)
   Import this file before any other stylesheet. Do not hard-code colours,
   fonts or spacing elsewhere: always use these variables.
   Fonts (put in <head>, before this file):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
   Korean pages (lang="ko") also load:
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap" rel="stylesheet">
   Chinese pages (lang="zh") also load:
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
   ========================================================================= */

:root {
  /* ---- Palette --------------------------------------------------------- */
  --rb-charcoal:   #222222;  /* text, dark sections, header/footer on dark */
  --rb-gold:       #B8924A;  /* sun, lines, icons, borders. NOT for text on light backgrounds */
  --rb-gold-light: #D9BD82;  /* gold on charcoal or bordeaux (text allowed: 8.7:1 on charcoal) */
  --rb-gold-text:  #765825;  /* gold-coloured TEXT on chalk/sand (6.0:1 on chalk, 5.0:1 on sand) */
  --rb-sand:       #E9DFCF;  /* secondary backgrounds, cards */
  --rb-chalk:      #F7F4EE;  /* main background, never pure white for large areas */
  --rb-white:      #FFFFFF;  /* form fields, small surfaces only */
  --rb-muted:      #5C5248;  /* secondary text on light backgrounds (6.9:1 on chalk) */
  --rb-bordeaux:   #6B2C35;  /* secondary accent: wine list, evening events. Sparingly */
  --rb-seaglass:   #A9C9C2;  /* secondary accent: pool / lagoon details. Sparingly, never text */
  --rb-overlay:    rgba(34, 34, 34, 0.45); /* dark overlay on photos behind text or logo */

  /* ---- Semantic roles --------------------------------------------------- */
  --bg:            var(--rb-chalk);
  --bg-alt:        var(--rb-sand);
  --bg-dark:       var(--rb-charcoal);
  --text:          var(--rb-charcoal);
  --text-muted:    var(--rb-muted);
  --text-on-dark:  var(--rb-chalk);
  --accent:        var(--rb-gold);
  --accent-on-dark: var(--rb-gold-light);
  --line:          var(--rb-gold);
  --border:        rgba(34, 34, 34, 0.12);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans:  "Jost", "Noto Sans KR", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Cinzel", "Jost", Georgia, serif;   /* short UPPERCASE labels only */

  --fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); /* hero title, Jost Light */
  --fs-h1:      clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-body:    1rem;       /* 16 px, Jost Light 300 */
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;    /* 12 px, Cinzel 500, uppercase */

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

  --ls-wide:   0.12em;   /* titles in capitals */
  --ls-label:  0.3em;    /* Cinzel labels, nav links */

  /* ---- Spacing & layout ------------------------------------------------- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem; --space-4: 2rem;
  --space-5: 3rem;    --space-6: 4rem;   --space-7: 6rem;   --space-8: 8rem;
  --section-y: clamp(4rem, 3rem + 4vw, 8rem);   /* vertical padding of sections */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  --radius: 0;           /* square corners everywhere (Art Deco, not "app-like") */
  --rule: 1px solid var(--line);
  --shadow: none;        /* no drop shadows; use space and lines instead */
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---- Base ---------------------------------------------------------------- */
html { background: var(--bg); color: var(--text); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-sans); font-weight: 300; line-height: var(--lh-tight); letter-spacing: 0.02em; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 400; }
p  { margin: 0 0 var(--space-2); max-width: 65ch; }
a  { color: inherit; text-decoration-color: var(--line); text-underline-offset: 0.25em; }
a:hover { color: var(--rb-gold-text); }
.on-dark a:hover { color: var(--rb-gold-light); }

/* ---- Label (Cinzel, uppercase, spaced) ----------------------------------- */
.label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--rb-gold-text);
}
.on-dark .label { color: var(--rb-gold-light); }

/* ---- Sections ------------------------------------------------------------ */
.section      { padding: var(--section-y) var(--gutter); }
.section--alt { background: var(--bg-alt); }
.section--dark, .on-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.container    { max-width: var(--container); margin: 0 auto; }

/* ---- Divider: line · sun · line (uses the solid sun icon) ---------------- */
.divider {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin: var(--space-5) auto;
}
.divider::before, .divider::after { content: ""; width: min(160px, 25vw); border-top: var(--rule); }
.divider img { height: 18px; width: auto; }   /* /brand/logo/riviera-boracay_sun-icon_gold.svg */
.on-dark .divider::before, .on-dark .divider::after { border-color: var(--rb-gold-light); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-small); line-height: 1.2;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  padding: 0.95rem 2.25rem; border-radius: var(--radius); border: 1px solid transparent; box-sizing: border-box;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  min-height: 44px; cursor: pointer;
}
.btn--primary { background: var(--rb-charcoal); color: var(--rb-chalk); }
.btn--primary:hover { background: var(--rb-gold); color: var(--rb-charcoal); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--rb-gold); }
.btn--outline:hover { background: var(--rb-gold); color: var(--rb-charcoal); }
.on-dark .btn--primary { background: var(--rb-gold-light); color: var(--rb-charcoal); }
.on-dark .btn--outline { color: var(--rb-chalk); border-color: var(--rb-gold-light); }

/* ---- Photos -------------------------------------------------------------- */
.photo-overlay { position: relative; }
.photo-overlay::after { content: ""; position: absolute; inset: 0; background: var(--rb-overlay); }

/* ---- Sun pattern (footer, dark bands) ------------------------------------ */
.pattern-sun-gold { background: var(--rb-charcoal) url("/brand/pattern/sun-pattern_gold.svg") repeat; background-size: 128px; }
.pattern-sun-sand { background: var(--rb-chalk) url("/brand/pattern/sun-pattern_sand.svg") repeat; background-size: 128px; }

/* ---- Korean & Chinese pages: Jost and Cinzel have no Hangul / Han glyphs -- */
:lang(ko) { --font-sans: "Noto Sans KR", "Jost", system-ui, sans-serif; --font-label: "Noto Sans KR", "Jost", sans-serif; }
:lang(zh) { --font-sans: "Noto Sans SC", "Jost", system-ui, sans-serif; --font-label: "Noto Sans SC", "Jost", sans-serif; }
:lang(ko) .label, :lang(zh) .label { letter-spacing: 0.12em; }
:lang(ko) body, :lang(zh) body { line-height: 1.8; }

/* ---- Accessibility ------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--rb-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }