/* =============================================================================
   Elysia — Design Tokens
   Extracted from the Villa Elysia Figma design system. Every value below maps
   to something observed in the design; component styles in main.css consume
   these custom properties rather than hard-coding values.
   ============================================================================= */

:root {
  /* --- Brand palette ------------------------------------------------------ */
  --color-terracotta:   #772A16; /* primary brand: bands, footer, accents      */
  --color-burnt-orange: #A95A26; /* secondary accent: highlighted heading word */
  --color-maroon-dark:  #581D0E; /* solid dark CTA buttons, excursion cards     */
  --color-ink:          #1C1410; /* espresso near-black: text + dark backdrops  */
  --color-taupe:        #7A6A58; /* body copy, nav links, outline-button border */
  --color-gold:         #C39A6B; /* eyebrows, hairlines, ticks, numerals        */
  --color-cream:        #F3ECDC; /* primary light surface, outlined button fill */
  --color-ivory:        #EFE8D8; /* header bar + home footer band background     */
  --color-sand:         #FAF7F1; /* lightest alternate section background        */
  --color-white:        #FFFFFF;

  /* Translucent lines / text-on-dark */
  --line:            rgba(195, 154, 107, 0.18); /* gold hairline 18%            */
  --line-strong:     rgba(195, 154, 107, 0.35); /* gold hairline 35%           */
  --on-dark:         rgba(255, 255, 255, 0.60);  /* body text over dark/photo   */
  --on-dark-muted:   rgba(255, 255, 255, 0.40);  /* micro-labels over dark      */

  /* --- Semantic aliases --------------------------------------------------- */
  --color-bg:            var(--color-sand);
  --color-surface:       var(--color-cream);
  --color-surface-alt:   var(--color-ivory);
  --color-text:          var(--color-ink);
  --color-text-muted:    var(--color-taupe);
  --color-accent:        var(--color-terracotta);
  --color-accent-2:      var(--color-burnt-orange);
  --color-header-bg:     var(--color-ivory);
  --color-footer-bg:     var(--color-ivory);
  --color-border:        var(--line);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "GFS Didot", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-serif:   "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans:    "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Font weights */
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;

  /* Type scale — fluid where large, fixed where small. rem @16px base. */
  --fs-h1: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);  /* 44 → 76 */
  --lh-h1: 1.12;
  --ls-h1: -0.01em;

  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.175rem);   /* 28 → 34.8 (Figma section H2) */
  --lh-h2: 1.3;
  --ls-h2: -0.011em;

  --fs-h3: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);   /* ~26 → 36 */
  --lh-h3: 1.22;
  --ls-h3: 0;

  --fs-h4: 1.625rem;  /* 26 */
  --lh-h4: 1.23;
  --ls-h4: -0.011em;

  --fs-h5: 1.375rem;  /* 22 */
  --lh-h5: 1.27;

  --fs-h6: 1.125rem;  /* 18 */
  --lh-h6: 1.22;

  --fs-numeral: clamp(2.5rem, 2rem + 2vw, 3.3rem); /* 40 → 52.8 decorative index (Figma card num) */
  --lh-numeral: 1;
  --ls-numeral: -0.02em;

  --fs-body:    0.875rem;   /* 14 */
  --lh-body:    1.85;       /* Figma body ≈ 1.88 */
  --fs-body-sm: 0.8125rem;  /* 13 */
  --lh-body-sm: 1.8;
  --fs-small:   0.75rem;    /* 12 */
  --lh-small:   1.8;

  --fs-nav:     1.125rem;   /* 18 */
  --ls-nav:     0.02em;

  --fs-eyebrow: 0.5625rem;  /* 9 — uppercase tracked label */
  --lh-eyebrow: 1.3;
  --ls-eyebrow: 0.32em;

  --fs-button:  0.75rem;    /* 12 — uppercase tracked button */
  --ls-button:  0.16em;

  /* --- Spacing scale (4 → 128) ------------------------------------------- */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --space-10: 8rem;    /* 128 */

  /* Vertical rhythm for full-width sections */
  --section-y: clamp(3.5rem, 2rem + 5vw, 7rem);

  /* --- Layout ------------------------------------------------------------- */
  --content-max:  1440px;  /* readable container (design canvas uses ~1792) */
  --content-wide: 1792px;  /* near-full-bleed section width                 */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --header-h: 88px;
  --radius: 0px;           /* the design uses sharp corners throughout       */

  /* --- Effects / motion --------------------------------------------------- */
  --shadow-soft: 0 24px 60px -30px rgba(28, 20, 16, 0.35);
  --transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Breakpoints (reference; used in main.css media queries) ------------ */
  /* 480px | 768px | 1024px | 1280px | 1536px */
}