/* =====================================================================
   YORK LODGE — Design System foundations
   Colors + Typography tokens for a luxury single-property website.
   Import this file wherever you build York Lodge assets:
     <link rel="stylesheet" href="colors_and_type.css">
   Montserrat is pulled from Google Fonts (body weights 300–700) because
   only Thin/ExtraLight/ExtraBold .otf files were supplied — see README.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---- Cormorant (editorial serif) — supplied .otf files ------------- */
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant-Semi.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Cormorant Small Caps — for refined eyebrow / overline labels */
@font-face {
  font-family: 'Cormorant SC';
  src: url('fonts/CormorantSC-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant SC';
  src: url('fonts/CormorantSC-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ============================ COLOR ============================ */
  /* Core palette (from colors.png) ------------------------------- */
  --forest:    #202616;  /* deep earthy green — primary brand dark   */
  --espresso:  #26190D;  /* near-black warm brown — ink / footer bg  */
  --walnut:    #593C23;  /* warm brown — secondary, dividers, hover  */
  --camel:     #A67A53;  /* camel — primary accent, CTAs, links      */
  --taupe:     #BFA58E;  /* soft taupe — muted text, borders         */

  /* Extended warm neutrals (derived, harmonious) ----------------- */
  --linen:     #F4EEE6;  /* warm off-white — page background         */
  --bone:      #EAE2D6;  /* card / panel surface                     */
  --sand:      #DBCEBC;  /* subtle fill, inset rows                  */
  --parchment: #FBF8F3;  /* lightest surface, hero facts panel       */

  /* Functional foreground / background --------------------------- */
  --bg:         var(--linen);
  --bg-elevated:var(--parchment);
  --surface:    var(--bone);
  --ink:        var(--espresso);   /* primary text on light          */
  --fg1:        #2C2317;           /* near-espresso body on light     */
  --fg2:        #5A4A38;           /* secondary text                  */
  --fg3:        #8A7660;           /* muted / captions                */
  --on-dark-1:  #F4EEE6;           /* primary text on dark            */
  --on-dark-2:  #C9BCAA;           /* secondary text on dark          */
  --on-dark-3:  #948571;           /* muted text on dark              */

  /* Accent / interactive ----------------------------------------- */
  --accent:        var(--camel);
  --accent-hover:  #92683F;        /* camel, darkened (press/hover)   */
  --accent-soft:   #E4D5C2;        /* camel tint for chips/fills      */
  --link:          var(--walnut);
  --focus-ring:    #A67A5366;      /* camel @ 40% — focus outline      */

  /* Lines & borders ---------------------------------------------- */
  --border:        #D8CBB8;        /* hairline on light               */
  --border-strong: #B7A48B;        /* emphasised divider              */
  --border-on-dark:#3A4030;        /* hairline on forest/espresso     */
  --rule:          rgba(38,25,13,0.12); /* faint editorial rule        */

  /* ===================== RADIUS / SHADOW / SPACE ================= */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Soft, warm, low-contrast shadows (never harsh black) --------- */
  --shadow-sm: 0 1px 2px rgba(38,25,13,0.06), 0 1px 3px rgba(38,25,13,0.05);
  --shadow-md: 0 6px 18px rgba(38,25,13,0.10), 0 2px 6px rgba(38,25,13,0.06);
  --shadow-lg: 0 24px 60px rgba(38,25,13,0.18), 0 8px 22px rgba(38,25,13,0.10);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.4);

  /* Cinematic image protection gradients ------------------------- */
  --scrim-bottom: linear-gradient(to top, rgba(20,16,9,0.78) 0%, rgba(20,16,9,0.30) 38%, rgba(20,16,9,0) 70%);
  --scrim-full:   linear-gradient(to top, rgba(20,16,9,0.70) 0%, rgba(20,16,9,0.15) 50%, rgba(20,16,9,0.45) 100%);

  /* 8px spacing scale -------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ========================= TYPE TOKENS ======================== */
  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-caps:    'Cormorant SC', 'Cormorant', Georgia, serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Editorial display weights run LIGHT; UI/labels run Montserrat. */
  --tracking-eyebrow: 0.28em;   /* wide-tracked overlines           */
  --tracking-label:   0.14em;   /* nav, buttons, fact labels        */
  --tracking-tight:   0.005em;
  --leading-display:  1.04;
  --leading-body:     1.65;
}

/* =====================================================================
   SEMANTIC TYPE STYLES — apply directly or copy into components.
   Display = Cormorant (light). UI / body = Montserrat.
   ===================================================================== */

.display-xl {           /* hero property title */
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: var(--leading-display);
  letter-spacing: 0.01em;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.12;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
}
.serif-quote {          /* pull quotes, large italic statements */
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.3;
}

.eyebrow {              /* wide-tracked overline above headings */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-serif {        /* alternate small-caps eyebrow */
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}

.lead {                 /* intro paragraph */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--fg2);
}
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: var(--leading-body);
  color: var(--fg1);
}
.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg2);
}
.label {                /* nav items, fact labels, buttons */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg1);
}
.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--fg3);
}
.stat-figure {          /* large fact numbers (price, beds) */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.005em;
}