/* ============================================================
   GRAM'S HOLLER — Foundations: Color + Type
   Appalachian handmade goods. Warm, woody, hand-tied.
   Load fonts via Google Fonts (see fonts.css or <link> in HTML):
     Rye, Bitter, Spectral, Caveat
   ============================================================ */

:root {
  /* ---------- RAW PALETTE ---------- */

  /* Paper & surfaces — aged cream, kraft, linen */
  --gh-paper:        #F3E8CF;  /* primary background — aged paper / cream */
  --gh-paper-warm:   #FBF4E2;  /* lighter card cream */
  --gh-linen:        #E7D8B6;  /* deeper paper / panels */
  --gh-kraft:        #D8C19A;  /* kraft tan / tags */

  /* Wood — walnut to oak (text + structure) */
  --gh-ink:          #2C2014;  /* near-black walnut ink — primary text */
  --gh-walnut:       #3F2C1D;  /* dark walnut */
  --gh-bark:         #5C3F2A;  /* bark brown — secondary text */
  --gh-oak:          #8A6240;  /* oak — tertiary / borders */
  --gh-tan:          #B89164;  /* light oak / muted */

  /* Holler greens — forest valley */
  --gh-holler:       #354029;  /* deepest forest green */
  --gh-moss:         #586B3A;  /* moss */
  --gh-sage:         #8C9A6B;  /* sage / soft green */

  /* Barn & clay — warm reds */
  --gh-barn:         #9E3A24;  /* barn red / clay — PRIMARY ACTION */
  --gh-clay:         #C25E38;  /* lighter clay / terracotta */
  --gh-ember:        #7A2A18;  /* deep ember (pressed/dark) */

  /* Goldenrod — wheat, lantern light */
  --gh-goldenrod:    #C8902C;  /* goldenrod accent */
  --gh-wheat:        #DEBB5E;  /* pale wheat / highlight */

  /* Dusk — muted mountain blue (sparing) */
  --gh-dusk:         #5E7173;  /* slate-blue dusk */

  /* Functional */
  --gh-success:      #586B3A;  /* moss */
  --gh-warning:      #C8902C;  /* goldenrod */
  --gh-danger:       #9E3A24;  /* barn red */

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:              var(--gh-paper);
  --bg-2:            var(--gh-linen);
  --surface:         var(--gh-paper-warm);
  --surface-sunk:    var(--gh-kraft);

  --fg:              var(--gh-ink);
  --fg-2:            var(--gh-bark);
  --fg-3:            var(--gh-oak);
  --fg-on-dark:      var(--gh-paper-warm);

  --primary:         var(--gh-barn);
  --primary-hover:   var(--gh-clay);
  --primary-press:   var(--gh-ember);
  --secondary:       var(--gh-holler);
  --accent:          var(--gh-goldenrod);

  --border:          color-mix(in srgb, var(--gh-oak) 45%, transparent);
  --border-strong:   color-mix(in srgb, var(--gh-walnut) 55%, transparent);
  --hairline:        color-mix(in srgb, var(--gh-oak) 24%, transparent);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Rye', 'Bitter', serif;       /* logotype + rare big moments */
  --font-heading: 'Bitter', Georgia, serif;     /* slab headings */
  --font-body:    'Spectral', Georgia, serif;   /* warm reading serif */
  --font-hand:    'Caveat', cursive;            /* hand-tied tags, notes, quotes */

  /* ---------- TYPE SCALE (1.250 major third, 18px base) ---------- */
  --text-xs:   0.694rem;   /* 12.5px — fine print, eyebrows */
  --text-sm:   0.833rem;   /* 15px   — captions, meta */
  --text-base: 1rem;       /* 18px   — body */
  --text-md:   1.25rem;    /* 22.5px — lead / large body */
  --text-lg:   1.563rem;   /* 28px   — h4 */
  --text-xl:   1.953rem;   /* 35px   — h3 */
  --text-2xl:  2.441rem;   /* 44px   — h2 */
  --text-3xl:  3.052rem;   /* 55px   — h1 */
  --text-4xl:  3.815rem;   /* 69px   — display */
  --text-5xl:  4.768rem;   /* 86px   — hero display */

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;  /* uppercase eyebrows */

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- RADII — gently rounded, hand-cut, never pill-slick ---------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-tag: 4px;     /* paper tags */
  --radius-round: 999px; /* chips, avatars only */

  /* ---------- SHADOWS — soft, warm, low (porch light, not neon) ---------- */
  --shadow-sm:  0 1px 2px rgba(44, 32, 20, 0.10);
  --shadow-md:  0 2px 6px rgba(44, 32, 20, 0.12), 0 1px 2px rgba(44, 32, 20, 0.08);
  --shadow-lg:  0 8px 24px rgba(44, 32, 20, 0.16), 0 2px 6px rgba(44, 32, 20, 0.10);
  --shadow-inset: inset 0 1px 2px rgba(44, 32, 20, 0.12);

  /* ---------- MOTION — unhurried, like a rocking chair ---------- */
  --ease-rock: cubic-bezier(0.34, 0.02, 0.2, 1);   /* gentle ease */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

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

.gh-logotype {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  color: var(--gh-barn);
  line-height: 1;
}

.gh-display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--fg);
  font-weight: 400;
}

.gh-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.gh-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--fg);
  text-wrap: balance;
}

.gh-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.gh-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.gh-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gh-barn);
}

.gh-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg-2);
}

.gh-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}

.gh-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.gh-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.gh-hand {
  font-family: var(--font-hand);
  font-size: var(--text-md);
  color: var(--gh-bark);
  line-height: 1.3;
}

.gh-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gh-ink);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}