/* =========================================================================
   WAGON — Colors & Type
   Street-legal golf cart rentals at luxury hospitality properties.
   
   Aesthetic: confident, sun-washed, hospitality-grade. The brand orange
   (burnt sienna) is borrowed from sunset light on Florida limestone and
   old resort signage. Cream, ink, and palm green ground it.
   ========================================================================= */

/* --- Fonts --------------------------------------------------------------- */
/* Display: Archivo Black — chunky, condensed, geometric. Closest Google
   Fonts match to the logo's custom lettering. Flagged to user for review. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =======================================================================
     COLORS
     ======================================================================= */

  /* --- Brand: Blaze (Burnt Sienna) — primary brand color --- */
  --blaze-50:  #FFF1EA;
  --blaze-100: #FFDDC8;
  --blaze-200: #FFB891;
  --blaze-300: #FF9159;
  --blaze-400: #FA7838;
  --blaze-500: #F55F1E;  /* ★ primary brand orange — sampled from logo */
  --blaze-600: #D94E12;
  --blaze-700: #B33E0C;
  --blaze-800: #872E08;
  --blaze-900: #561C04;

  /* --- Neutral: Ink — warm near-black, not pure black --- */
  --ink-50:  #F7F5F2;
  --ink-100: #EEEAE3;
  --ink-200: #D9D2C7;
  --ink-300: #B8AE9F;
  --ink-400: #8A7F6E;
  --ink-500: #5F5647;
  --ink-600: #423C31;
  --ink-700: #2B2720;
  --ink-800: #1A1814;
  --ink-900: #0F0E0B;

  /* --- Surface: Cream — warm off-white background system --- */
  --cream:      #FAF5EC;   /* primary canvas */
  --cream-soft: #F3EBDB;   /* subtle panel */
  --cream-deep: #E8DCC4;   /* divider / quiet card */
  --paper:      #FFFDF8;   /* near white, for cards */

  /* --- Accent: Palm — a deep resort-foliage green --- */
  --palm-50:  #EAF1E8;
  --palm-100: #CCDCC6;
  --palm-200: #99B98C;
  --palm-400: #4E7A42;
  --palm-500: #325A28;  /* ★ accent */
  --palm-700: #1F3A18;
  --palm-900: #0D1E09;

  /* --- Accent: Sky — a clear poolside blue (sparingly) --- */
  --sky-100: #D9EEF2;
  --sky-400: #4FB3C4;
  --sky-600: #2A7E8E;

  /* --- Accent: Sand — warm dune yellow (highlights, bg tints) --- */
  --sand-100: #F5E8C4;
  --sand-400: #E3C26F;
  --sand-600: #B5933F;

  /* =======================================================================
     SEMANTIC TOKENS
     ======================================================================= */
  --bg:            var(--cream);
  --bg-elevated:   var(--paper);
  --bg-sunken:     var(--cream-soft);
  --bg-inverse:    var(--ink-800);

  --fg:            var(--ink-800);   /* primary text */
  --fg-muted:      var(--ink-500);   /* secondary text */
  --fg-subtle:     var(--ink-400);   /* tertiary / meta */
  --fg-inverse:    var(--cream);
  --fg-brand:      var(--blaze-500);

  --border:        var(--ink-200);
  --border-strong: var(--ink-700);
  --border-subtle: var(--cream-deep);

  --accent:        var(--blaze-500);
  --accent-hover:  var(--blaze-600);
  --accent-press:  var(--blaze-700);

  --success:       var(--palm-500);
  --warning:       var(--sand-600);
  --danger:        #C4361F;
  --info:          var(--sky-600);

  /* =======================================================================
     TYPOGRAPHY
     =======================================================================
     Archivo Black — display wordmark, headlines, stickers, signage.
     Archivo — everyday UI & body, pairs tightly with Archivo Black.
     Fraunces — editorial italic accent (pull-quotes, hospitality warmth).
     JetBrains Mono — metadata, cart IDs, receipts. */

  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-serif:   'Fraunces', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — generous, shout-first */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:  128px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* =======================================================================
     SPACING / RADII / SHADOWS / MOTION
     ======================================================================= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* Shadows are warm-tinted, not pure black */
  --shadow-xs: 0 1px 2px rgba(42, 28, 12, 0.08);
  --shadow-sm: 0 2px 6px rgba(42, 28, 12, 0.08), 0 1px 2px rgba(42, 28, 12, 0.04);
  --shadow-md: 0 8px 20px rgba(42, 28, 12, 0.10), 0 2px 4px rgba(42, 28, 12, 0.06);
  --shadow-lg: 0 20px 40px rgba(42, 28, 12, 0.14), 0 4px 8px rgba(42, 28, 12, 0.06);
  --shadow-xl: 0 32px 64px rgba(42, 28, 12, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(42, 28, 12, 0.08);

  /* Motion — confident and quick. No bouncy springs. */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-io:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — apply `.wagon` to a root element to adopt.
   ========================================================================= */
.wagon {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wagon h1, .wagon .h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.wagon h2, .wagon .h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}

.wagon h3, .wagon .h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.wagon h4, .wagon .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

.wagon h5, .wagon .h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin: 0;
}

.wagon p  { margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); }
.wagon .lead { font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--fg-muted); }
.wagon small, .wagon .small { font-size: var(--fs-sm); color: var(--fg-muted); }
.wagon .micro { font-size: var(--fs-xs); color: var(--fg-subtle); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600; }
.wagon code, .wagon kbd { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-muted); }

.wagon .serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.wagon .eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}