/* ============================================================
   THE HILTON SOLUTION — Design Tokens
   colors_and_type.css

   Use the BASE variables to compose, and reach for the SEMANTIC
   variables (--fg, --bg, --h1, --body, etc.) when building UI.

   Fonts:
   - Anton       (Google Fonts) — display / IG headlines
   - Quicksand   (Google Fonts) — body / UI
   - Italiana    (Google Fonts) — SUBSTITUTE for "Metanoia" (the
                                  thin, high-contrast serif in the
                                  THS logo). Ask the client for the
                                  Metanoia font file to swap in.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Quicksand:wght@300;400;500;600;700&family=Italiana&display=swap');

:root {
  /* ---------- COLOR · BASE PALETTE (from brand guide) ---------- */
  --c-black:        #000000;  /* primary brand black */
  --c-olive:        #22260F;  /* DEEP GREEN — the brand accent */
  --c-deep-green:   #22260F;  /* alias for --c-olive, by its newer name */
  --c-charcoal:     #3D3C3A;  /* warm charcoal */
  --c-espresso:     #5E4E43;  /* warm brown */
  --c-mauve:        #B39B97;  /* dusty mauve, soft accent */
  --c-cognac:       #884E22;  /* terracotta — still in palette, NOT the accent */
  --c-sand:         #C3A78B;  /* tan / sand */
  --c-cream:        #F6F4EF;  /* primary surface, page background */
  --c-white:        #FFFFFF;

  /* Tints + shades for UI layering (kept warm + low-chroma) */
  --c-cream-2:      #EEEAE1;  /* slightly deeper cream, alt surface */
  --c-cream-3:      #E4DED1;  /* card / divider on cream */
  --c-stone:        #8A8377;  /* mid neutral for muted text on cream */
  --c-ink:          #1A1A18;  /* near-black with warm cast, for body */

  /* Alphas */
  --c-black-a08:    rgba(0,0,0,0.08);
  --c-black-a16:    rgba(0,0,0,0.16);
  --c-black-a32:    rgba(0,0,0,0.32);
  --c-black-a48:    rgba(0,0,0,0.48);
  --c-cream-a72:    rgba(246,244,239,0.72);
  --c-cream-a90:    rgba(246,244,239,0.90);

  /* ---------- COLOR · SEMANTIC ---------- */
  --bg:             var(--c-cream);
  --bg-alt:         var(--c-cream-2);
  --bg-inverse:     var(--c-black);
  --bg-card:        var(--c-white);

  --fg:             var(--c-ink);            /* default text */
  --fg-muted:       var(--c-charcoal);
  --fg-soft:        var(--c-stone);
  --fg-inverse:     var(--c-cream);

  --accent:         var(--c-deep-green);     /* the brand accent — deep green #22260F */
  --accent-soft:    var(--c-sand);
  --accent-deep:    var(--c-black);

  --border:         var(--c-cream-3);
  --border-strong:  var(--c-charcoal);
  --divider:        var(--c-black-a08);

  /* ---------- TYPOGRAPHY · BASE ---------- */
  --font-display:   "Anton", "Oswald", "Bebas Neue", Impact, sans-serif;
  --font-serif:     "Italiana", "Cormorant", "Didot", "Bodoni MT", serif;   /* Metanoia substitute */
  --font-body:      "Quicksand", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (modular, fluid where useful) */
  --fs-hero:        clamp(3rem, 7vw, 6.5rem);   /* @kind font */ /* 48 → 104 */
  --fs-display:     clamp(2.25rem, 5vw, 4rem);  /* @kind font */ /* 36 → 64 */
  --fs-h1:          2.5rem;     /* 40 */
  --fs-h2:          2rem;       /* 32 */
  --fs-h3:          1.5rem;     /* 24 */
  --fs-h4:          1.25rem;    /* 20 */
  --fs-body:        1rem;       /* 16 */
  --fs-small:       0.875rem;   /* 14 */
  --fs-micro:       0.75rem;    /* 12 */
  --fs-eyebrow:     0.6875rem;  /* 11, used uppercase + tracked */

  --lh-tight:       1.02;   /* @kind font */
  --lh-snug:        1.15;   /* @kind font */
  --lh-normal:      1.45;   /* @kind font */
  --lh-relaxed:     1.6;    /* @kind font */

  --ls-tight:       -0.02em;
  --ls-normal:      0;       /* @kind font */
  --ls-wide:        0.08em;
  --ls-eyebrow:     0.22em;     /* TRACKED ALL-CAPS LABEL */

  --fw-light:       300;   /* @kind font */
  --fw-regular:     400;   /* @kind font */
  --fw-medium:      500;   /* @kind font */
  --fw-semibold:    600;   /* @kind font */
  --fw-bold:        700;   /* @kind font */

  /* ---------- SHAPE · RADII / SHADOW / SPACING ---------- */
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-pill:    999px;
  /* The brand's signature shape: a leaf with two diagonal points
     (top-right + bottom-left sharp; top-left + bottom-right rounded). */
  --radius-leaf:    50% 0 50% 0;

  --shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:      0 24px 48px rgba(0,0,0,0.12);
  --shadow-photo:   0 30px 60px -20px rgba(0,0,0,0.35); /* editorial drop */

  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;
  --space-10:       128px;

  --container:      1240px;
  --container-narrow: 880px;

  /* ---------- MOTION ---------- */
  --ease-out:       cubic-bezier(0.2, 0.7, 0.2, 1);    /* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --dur-fast:       150ms;   /* @kind other */
  --dur-base:       240ms;   /* @kind other */
  --dur-slow:       450ms;   /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* HERO — the IG-post / billboard headline */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  font-weight: var(--fw-regular); /* Anton has one weight */
}

/* DISPLAY — slim editorial serif (Metanoia / Italiana) */
.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  font-weight: var(--fw-regular);
}

/* H1 / H2 / H3 — Anton display by default; use .t-display variants
   on heroes / sections that want the elegant serif voice. */
h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}
h3, .t-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}
h4, .t-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

/* Body, lead, small */
p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  /* Inherits color from parent — DO NOT set here, or dark sections
     will lose their cream text. Body sets the default. */
}
.t-lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
}
.t-small { font-size: var(--fs-small); line-height: var(--lh-normal); }
.t-micro { font-size: var(--fs-micro); line-height: var(--lh-normal); }

/* EYEBROW — tracked all-caps label that sits above headlines */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}

/* QUOTE — editorial pull quote in serif */
.t-quote {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  font-style: normal;
}

/* MONOGRAM — the logo wordmark "THS" — only for badges/cover art */
.t-monogram {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.6; }

::selection { background: var(--accent); color: var(--c-cream); }