/*
 * Sacred Travels — design tokens
 * Source of truth: "Brand Book - Sacred Travels.pdf"
 *
 * Structural values (container widths, section rhythm, grid splits) are cloned
 * from premiumtransfersandtours.com. Colour and type are Sacred Travels.
 */

:root {
  /* ---- Brand palette (brand book) ---- */
  --st-bronze: #b7833f;        /* Antique Bronze — primary accent */
  --st-bronze-deep: #956329;   /* gradient partner used in the logo marks */
  --st-champagne: #f7eb9b;     /* Champagne Gold — light accent */
  --st-black: #231f20;         /* Key Black */

  /* Bronze tint ramp — brand book shows 25/50/75/100 steps */
  --st-bronze-25: #ede0cf;
  --st-bronze-50: #dbc19f;
  --st-bronze-75: #c9a26f;
  --st-bronze-100: var(--st-bronze);

  /* The logo marks are a metallic gradient, not a flat fill.
     Use this anywhere the mark is reproduced in CSS. */
  --st-bronze-gradient: linear-gradient(135deg, var(--st-bronze-deep) 0%, var(--st-bronze) 45%, var(--st-champagne) 100%);

  /* ---- Functional colours ---- */
  /* These replace the source site's blue/slate scheme 1:1.
     Source values confirmed against the live CSS aggregate, not eyeballed. */
  --st-accent: var(--st-bronze);          /* was #54b3d7  sky blue accent  */
  --st-accent-ink: #ffffff;               /* text on accent                */
  --st-ground-dark: var(--st-black);      /* was #1b1b1b  header           */
  --st-ground-deep: var(--st-black);      /* was #232d37  pre-footer band  */
  --st-ground-deepest: #16110f;           /* was #1c232e  footer bar       */
  --st-ground: #ffffff;
  --st-ground-muted: #f6f4f1;             /* was #f7f7f7  partner band     */

  --st-text: var(--st-black);
  --st-text-muted: #6f6a64;
  --st-text-invert: #ffffff;

  --st-rule: #e4ded5;                     /* hairline dividers            */
  --st-rule-strong: var(--st-bronze);     /* price-box border             */

  --st-star: var(--st-bronze);            /* rating stars                 */
  --st-success: #4c8a3f;                  /* "Check Availability" button  */

  /* ---- Typography ---- */
  /* Mont is a commercial family (Fontfabric) and is NOT on Google Fonts.
     Until licensed files are dropped into assets/fonts/, --st-font-fallback
     carries the design. See BRAND-NOTES.md. */
  --st-font: 'Mont', var(--st-font-fallback);
  --st-font-fallback: 'Montserrat', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --st-w-regular: 400;
  --st-w-bold: 700;
  --st-w-heavy: 800;
  --st-w-black: 900;

  /* Brand book scale, converted pt -> px at the ratios it specifies */
  --st-h1: clamp(2rem, 1.4rem + 2.2vw, 2.833rem);   /* 34pt Mont Black   */
  --st-h2: clamp(1.5rem, 1.2rem + 1.1vw, 1.833rem); /* 22pt Mont Heavy   */
  --st-h3: 1.5rem;                                   /* 18pt Mont Bold    */
  --st-body: 1rem;                                   /* 14pt Mont Regular */
  --st-small: 0.8125rem;

  --st-leading-tight: 1.15;
  --st-leading: 1.65;

  /* ---- Layout (cloned structure) ---- */
  --st-container: 1170px;      /* source site's content width */
  --st-gutter: 15px;
  --st-section-y: 70px;        /* standard vertical section padding */
  --st-section-y-sm: 40px;

  --st-radius: 0;              /* source uses hard corners throughout */
  --st-shadow: 0 2px 12px rgb(35 31 32 / 8%);

  /* ---- Breakpoints (documented; use in media queries) ---- */
  /* sm 480 · md 768 · lg 992 · xl 1200 */
}

@media (max-width: 991px) {
  :root {
    --st-section-y: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --st-section-y: 36px;
  }
}