/* =====================================================================
   Golden Height Travel — Colors & Type
   Single source of truth for the design system.
   Import this file in every artifact:
     <link rel="stylesheet" href="colors_and_type.css">
     plus the Google Fonts <link> from fonts/fonts.html.
   ===================================================================== */

/* ---------- Fonts ----------------------------------------------------- */
/* Cormorant Garamond  — display serif. Editorial headlines, destinations.
                         (Live site uses Georgia 300 — we upgrade to a real
                          editorial serif for typographic richness.)
   Geist                — UI sans. Body, buttons, nav, labels.
                         (Matches the live goldenheight.pages.dev site.)
   Geist Mono           — mono. Tiny all-caps eyebrows, ref codes, tickets.
   Loaded via Google Fonts — see fonts/fonts.html for the <link> tag.   */

:root {
  /* ------- Color tokens — primitives -------------------------------- */
  /* Ink — primary foreground / dark surface (matches live site #1a1a1a) */
  --ink:          #1a1a1a;
  --ink-90:       #2a2a2a;
  --ink-70:       #4a4a4a;
  --ink-50:       #6b6b6b;          /* live site --color-text-secondary */
  --ink-30:       #999999;          /* live site --color-text-light */
  --ink-15:       #d4d4d4;
  --ink-08:       #ececec;

  /* Gold / brass — the brand accent (matches live site #b8985f) */
  --gold:         #b8985f;
  --gold-deep:    #8a6f3f;          /* hover / press / gold text on light */
  --gold-soft:    #d9c499;          /* hairline / quiet underlines */
  --gold-wash:    #f3ead3;          /* background tint, callout fills */

  /* Cream — primary warm background (matches live site #f5f3ed) */
  --cream:        #f5f3ed;
  --paper:        #fbfaf6;          /* lifted card BG */
  --sand:         #e8e4d6;          /* subtle divider */

  /* Supporting accents — used sparingly */
  --terracotta:   oklch(0.58 0.12 35);    /* ~ #B86848 highlight/sale */
  --sage:         oklch(0.48 0.045 155);  /* ~ #4D6A5C success/quiet */
  --sky:          oklch(0.62 0.08 220);   /* ~ #4D85B7 info */
  --ruby:         oklch(0.50 0.16 25);    /* ~ #B23A2A error/destructive */

  /* ------- Semantic role tokens ------------------------------------- */
  --bg:           var(--cream);
  --bg-elevated:  var(--paper);
  --bg-inverse:   var(--ink);
  --bg-tint:      var(--gold-wash);

  --fg:           var(--ink);
  --fg-muted:     var(--ink-70);
  --fg-subtle:    var(--ink-50);
  --fg-inverse:   var(--cream);

  --accent:       var(--gold);
  --accent-deep:  var(--gold-deep);
  --accent-soft:  var(--gold-soft);

  --border:       rgb(26 26 26 / 0.12);
  --border-strong:rgb(26 26 26 / 0.22);
  --border-on-dark: rgb(245 243 237 / 0.14);

  --success:      var(--sage);
  --warning:      var(--gold-deep);
  --danger:       var(--ruby);

  /* ------- Type families -------------------------------------------- */
  /* Display = Cormorant Garamond (our editorial upgrade over Georgia).
     Body    = Geist (matches live site).
     Mono    = Geist Mono (matches live site).
     Live-site fallback for display is Georgia 300 with 0.5px tracking. */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  /* ------- Type scale (rems against 16px) --------------------------- */
  --size-display: 5.5rem;   /* 88px */
  --size-h1:      3.75rem;  /* 60px */
  --size-h2:      2.75rem;  /* 44px */
  --size-h3:      2rem;     /* 32px */
  --size-h4:      1.5rem;   /* 24px */
  --size-h5:      1.25rem;  /* 20px */
  --size-body-lg: 1.125rem; /* 18px */
  --size-body:    1rem;     /* 16px */
  --size-body-sm: 0.9375rem;/* 15px */
  --size-meta:    0.8125rem;/* 13px */
  --size-label:   0.75rem;  /* 12px */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-normal:  0;
  --track-eyebrow: 0.18em;
  --track-mono:    0.10em;

  /* ------- Spacing (8px grid) --------------------------------------- */
  --space-0:  0;
  --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 */

  /* ------- Radii ---------------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ------- Elevation ------------------------------------------------ */
  --shadow-rest:  0 1px 2px rgb(31 30 24 / 0.06), 0 4px 12px rgb(31 30 24 / 0.04);
  --shadow-lift:  0 8px 24px rgb(31 30 24 / 0.10), 0 2px 6px rgb(31 30 24 / 0.06);
  --shadow-deep:  0 24px 64px rgb(31 30 24 / 0.18), 0 4px 12px rgb(31 30 24 / 0.10);

  /* ------- Motion --------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:   160ms;
  --dur-base:    240ms;
  --dur-reveal:  480ms;

  /* ------- Layout --------------------------------------------------- */
  --max-content: 1240px;
  --gutter-desktop: var(--space-9);
  --gutter-mobile:  var(--space-5);
}

/* =====================================================================
   Element resets / semantic defaults
   ===================================================================== */
html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-base);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); letter-spacing: var(--track-tight); }
h4 { font-size: var(--size-h4); letter-spacing: var(--track-tight); line-height: var(--leading-snug); }
h5 { font-size: var(--size-h5); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: var(--leading-snug); }

p  { margin: 0 0 1em; text-wrap: pretty; }
small { font-size: var(--size-meta); color: var(--fg-muted); }

/* =====================================================================
   Utility classes — use these in artifacts
   ===================================================================== */
.gh-display     { font-family: var(--font-display); font-size: var(--size-display); line-height: var(--leading-tight); letter-spacing: var(--track-display); font-weight: 500; }
.gh-eyebrow     { font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-muted); font-weight: 500; }
.gh-eyebrow-gold{ font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-deep); font-weight: 500; }
.gh-overline    { font-family: var(--font-body); font-size: var(--size-meta); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--fg-muted); }
.gh-italic      { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.gh-mono        { font-family: var(--font-mono); letter-spacing: var(--track-mono); font-size: var(--size-meta); }
.gh-meta        { font-size: var(--size-meta); color: var(--fg-muted); }

/* =====================================================================
   Graphic motif — "stepped stripes"
   Borrowed from the building motif in the logo. Use as section
   underlines, card accents, divider runs, never as decorative chrome.
   ===================================================================== */
.gh-stepbar {
  display: block;
  width: 96px;
  height: 18px;
  background:
    linear-gradient(to bottom,
      var(--ink) 0 3px,
      transparent 3px 6px,
      var(--gold) 6px 9px,
      transparent 9px 12px,
      var(--ink) 12px 15px,
      transparent 15px 18px);
}
.gh-stepbar--lg { width: 160px; height: 24px;
  background:
    linear-gradient(to bottom,
      var(--ink) 0 4px,
      transparent 4px 8px,
      var(--gold) 8px 12px,
      transparent 12px 16px,
      var(--ink) 16px 20px,
      transparent 20px 24px);
}
.gh-stepbar--gold {
  background:
    linear-gradient(to bottom,
      var(--gold) 0 3px,
      transparent 3px 6px,
      var(--gold-deep) 6px 9px,
      transparent 9px 12px,
      var(--gold) 12px 15px,
      transparent 15px 18px);
}