/* ===================================================================
   ALLF DESIGN TOKENS  -  "the control panel"
   ===================================================================
   Every design VALUE (color, font, size, spacing, shape, motion) lives
   here as a named variable. Change a value here once and it updates
   everywhere. theme.css reads these names and has no hardcoded values
   of its own, so you never have to touch it to change the look.

   The name on the left of the colon is the dial. The value is its
   current setting. The plain words after it say what it controls.
   Defaults match the loved "resort-v1" reference.
   =================================================================== */

:root {

  /* ----- COLOR: brand ----- */
  --maroon:      #660000;   /* headings, primary buttons */
  --red:         #B80C1B;   /* hover accent */
  --gold:        #f0e020;   /* signature gold: CTAs, the little accent rule */
  --gold-soft:   #f7f06a;   /* lighter gold for button hover */
  --buttercream: #F7EFDA;   /* warm cream used on dark text and quote bands */
  --linen:       #FCF9F0;   /* the page background (soft warm off-white) */
  --charcoal:    #1D2429;   /* nav, dark feature sections */
  --footer-dark: #141a1e;   /* footer (a touch darker than charcoal) */
  --pavement:    #384042;   /* body text */
  --caramel:     #EECA9E;   /* warm tan accent on dark backgrounds */
  --hairline:    #e3d9c2;   /* faint divider lines */

  /* ----- COLOR: jobs (what color does what) ----- */
  --bg:         var(--buttercream);   /* page background (matches the approved resort mockup) */
  --ink:        var(--charcoal);   /* strongest text */
  --ink-soft:   var(--pavement);   /* body text */
  --link:       var(--maroon);
  --link-hover: var(--red);
  --accent:     var(--gold);

  /* ----- TYPE: families ----- */
  --font-display: 'Cormorant Garamond', Georgia, serif;   /* big serif headings (the editorial voice) */
  --font-body:    'Source Sans 3', system-ui, sans-serif; /* body text (clean + readable) */
  --font-label:   'Source Sans 3', system-ui, sans-serif; /* small UPPERCASE labels, nav, buttons */
  --font-num:     'Source Sans 3', system-ui, sans-serif; /* NUMBERS (TOC, stats): a font with even-height digits, never Cormorant */

  /* ----- TYPE: sizes (clamp = min, scale-with-screen, max) ----- */
  --fs-body:     18px;                       /* standard paragraph */
  --fs-intro:    19px;                        /* opening/manifesto paragraph */
  --fs-h1:       clamp(32px, 4.6vw, 56px);    /* hero headline (blog titles run long, so kept moderate) */
  --fs-h2:       clamp(30px, 4.4vw, 50px);    /* section headings (maroon) */
  --fs-h3:       30px;                         /* sub-headings */
  --fs-eyebrow:  11.5px;                       /* the small label above a heading */
  --lh-body:     1.85;                         /* body line spacing (lots of breathing room) */
  --lh-tight:    1.05;                         /* big-heading line spacing */
  --track-eyebrow: 0.34em;                     /* letter-spacing on eyebrow labels */
  --track-label:   0.18em;                     /* letter-spacing on nav + buttons */

  /* ----- SPACE ----- */
  --section-pad: 78px;    /* vertical padding inside a section */
  --wrap:        880px;   /* max content width */
  --wrap-narrow: 680px;   /* narrower text column (homepage sections) */
  --wrap-article: 782px;  /* blog article text column (wider read; ~15% over wrap-narrow) */
  --article-top: 60px;    /* breathing space between the hero and the first line of copy */
  --banner-width: 980px;  /* food-tour banner width (breaks out wider than the text column) */
  --gap-card:    28px;    /* gap between cards in a grid */

  /* ----- SHAPE ----- */
  --rule-w:      46px;                    /* width of the little gold accent line (homepage centered headings) */
  --rule-h2:     70%;                      /* width of the gold rule under a blog H2, as % of the text column */
  --museum-img-ratio: 3 / 2;               /* white-card photo shape (4/5 = taller than square; 1/1 = square) */
  --dropcap-size: 70px;                    /* drop cap size (smaller = fewer lines wrap beside it) */
  --border:      1px solid var(--hairline);

  /* ----- MOTION ----- */
  --reveal-dur: 1s;                  /* fade-up-on-scroll duration */
  --ease:       ease;                /* easing curve */
  --breathe-dur: 26s;                /* how slowly the hero photo "breathes" (zooms) */
}