/* =========================================================================
   33 Peaks Cafe — Design Tokens
   Colors, type, spacing, radii, shadows.
   ========================================================================= */

/* Fonts
   Sans:    Source Sans 3 (brand-supplied, variable weight 200–900) —
            covers UI, body, eyebrows, and uppercase headlines.
   Display: Yeseva One (Google Fonts) — vintage chunky serif used
            ONLY for category names & feature flourishes. Brand owner
            has not supplied the live-site display face; this is the
            closest free match. Replace when an updated file is provided.
*/
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');

:root {
  /* ---------- Brand colors (raw) ---------- */
  --oak-green:        #635936;  /* primary — the logo / nav / headline color */
  --oak-green-deep:   #4d4528;  /* hover / pressed state for primary */
  --oak-green-soft:   #7d7349;  /* lighter green for hairlines, secondary fg */

  --cream:            #dcd2c3;  /* secondary — testimonial cards, accents */
  --cream-deep:       #c9bda9;  /* hover on cream surfaces */

  --caramel:          #ad8451;  /* accent — buttons, promo bar, CTA */
  --caramel-deep:     #946e3f;  /* hover / pressed on caramel */
  --caramel-soft:     #c7a37a;  /* tints, disabled states */

  --paper:            #ebe6e4;  /* light surface — page background */
  --paper-deep:       #ddd6d3;

  --bark:             #54504a;  /* dark warm gray — body copy, secondary dark */
  --bark-deep:        #2e2b27;
  --bark-soft:        #8a847d;

  --white:            #ffffff;
  --black:            #1a1714;  /* never pure black */

  /* ---------- Semantic surfaces ---------- */
  --bg-page:          var(--paper);
  --bg-elevated:      #f5f1ee;     /* slightly lighter than paper */
  --bg-card:          var(--cream);
  --bg-inverse:       var(--oak-green);
  --bg-promo:         var(--caramel);

  /* ---------- Semantic foreground ---------- */
  --fg-1:             var(--oak-green);   /* primary text / brand */
  --fg-2:             var(--bark);        /* body copy */
  --fg-3:             var(--bark-soft);   /* muted / meta */
  --fg-inverse:       var(--paper);       /* text on green / dark */
  --fg-on-promo:      var(--white);       /* text on caramel */

  /* ---------- Hairlines / borders ---------- */
  --border-1:         rgba(99, 89, 54, 0.18);   /* faint green hairline */
  --border-2:         rgba(84, 80, 74, 0.22);   /* warm gray divider */
  --border-strong:    var(--oak-green);

  /* ---------- Semantic state ---------- */
  --success:          #5a7a3a;
  --warning:          #c98a3a;
  --danger:           #a04a32;
  --info:             #5a6d7a;

  /* ---------- Type families ---------- */
  --font-display:     'Yeseva One', 'Playfair Display', Georgia, serif;
  --font-sans:        'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;
  --fs-6xl:   96px;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* used for UPPERCASE section labels */

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-none: 0px;
  --r-sm:   2px;     /* the site is mostly square — radii used sparingly */
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ---------- Shadows (warm, low-key) ---------- */
  --shadow-1: 0 1px 2px rgba(46, 43, 39, 0.08);
  --shadow-2: 0 4px 14px rgba(46, 43, 39, 0.10);
  --shadow-3: 0 12px 28px rgba(46, 43, 39, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;
}

/* =========================================================================
   Base + element styles
   ========================================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — vintage serif. Reserve for section flourishes,
   category titles, marquee numbers. Don't use for body. */
.co-display,
h1.co-display, h2.co-display, h3.co-display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-snug);
}

/* Section / page headings — the workhorse style on the live site:
   UPPERCASE, bold sans, olive green, generous tracking. */
.co-section-title {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-1);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

/* Hero headline — massive uppercase sans, often on photography */
.co-hero {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: 0.005em;
  color: var(--white);
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); color: var(--fg-1); font-weight: 700; }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug);  color: var(--fg-1); font-weight: 700; }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug);  color: var(--fg-1); font-weight: 600; }
h4 { font-size: var(--fs-xl);  line-height: var(--lh-snug);  color: var(--fg-1); font-weight: 600; }
h5 { font-size: var(--fs-lg);  color: var(--fg-1); font-weight: 600; }
h6 { font-size: var(--fs-md);  color: var(--fg-1); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }

p  { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--fg-2); }
.small, small { font-size: var(--fs-sm); color: var(--fg-3); }

/* The signature "tag" — uppercase tracked label used over photos, on cards */
.co-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

a { color: var(--caramel); text-decoration: none; }
a:hover { color: var(--caramel-deep); text-decoration: underline; text-underline-offset: 3px; }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }