/* =============================================================================
   Kingston Bread + Bar — Colors & Type
   "Good Bread, Good Vibes" — est 2017, Kingston NY
   ============================================================================= */

/* Jost is a free Google-hosted fallback for Futura at weights 400/500 */
/* (loaded via <link> in the HTML head instead of @import for performance) */

@font-face {
  font-family: "Futura";
  src: url("/fonts/Futura-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("/fonts/Futura-Heavy.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("/fonts/Futura-Heavy.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Motor";
  src: url("/fonts/Motor4F-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Motor";
  src: url("/fonts/Motor4F-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Motor";
  src: url("/fonts/Motor4F-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Motor";
  src: url("/fonts/Motor4F-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Motor";
  src: url("/fonts/Motor4F-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Motor";
  src: url("/fonts/Motor4F-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Coronet";
  src: url("/fonts/CoronetMTPro-Bold.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Coronet";
  src: url("/fonts/CoronetMTPro-Bold.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}

:root {
  /* ---------- COLOR / Core brand palette --------------------------------- */
  --kbb-bread-blue:   #2C4145;
  --kbb-bread-blue-ink: #1A2A2D;

  --kbb-wheat-gold:   #D6BE3D;
  --kbb-wheat-gold-deep: #B89E1F;

  --kbb-cream:        #F4ECD8;
  --kbb-cream-warm:   #EFE3C2;

  --kbb-baby-teal:    #1F8A82;
  --kbb-silo-purple:  #8A2A6E;

  --kbb-plaster:      #EAD4CF;
  --kbb-plaster-deep: #BC9177;
  --kbb-slate-blue:   #A8C0C2;

  --kbb-ink:          #111111;
  --kbb-paper:        #FFFFFF;

  --kbb-newsprint:    #B8B8B8;
  --kbb-newsprint-bg: #E5E2DC;

  /* ---------- COLOR / Semantic ------------------------------------------- */
  --bg-page:        var(--kbb-cream);
  --bg-surface:     var(--kbb-paper);
  --bg-inverse:     var(--kbb-bread-blue);

  --fg-primary:     var(--kbb-bread-blue-ink);
  --fg-secondary:   #5A6A6D;
  --fg-muted:       #8A9396;
  --fg-on-dark:     var(--kbb-cream);
  --fg-accent:      var(--kbb-wheat-gold);

  --border-soft:    rgba(44, 65, 69, 0.18);
  --border-strong:  var(--kbb-bread-blue);

  --price-badge-bg:    var(--kbb-newsprint-bg);
  --price-badge-ink:   var(--kbb-ink);

  /* ---------- TYPE / Families -------------------------------------------- */
  --font-display:  "Motor", "Trade Gothic", "Bebas Neue", "Helvetica Neue Condensed", sans-serif;
  --font-body:     "Futura", "Futura PT", "Jost", "Avenir Next", system-ui, -apple-system, sans-serif;
  --font-script:   "Coronet", "Snell Roundhand", "Brush Script MT", cursive;
  --font-mono:     ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- TYPE / Scale ----------------------------------------------- */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   96px;
  --text-6xl:   144px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-body:   1.45;
  --lh-loose:  1.6;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-poster:  0.02em;
  --tracking-eyebrow: 0.18em;

  /* ---------- SHAPE / Spacing / Elevation --------------------------------- */
  --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;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px 14px 14px;

  --stroke-hair:  1px;
  --stroke-line:  1.5px;
  --stroke-thick: 3px;

  --shadow-paper:  0 1px 0 rgba(26, 42, 45, 0.06), 0 2px 6px rgba(26, 42, 45, 0.08);
  --shadow-card:   0 2px 0 rgba(26, 42, 45, 0.08), 0 10px 24px rgba(26, 42, 45, 0.10);
  --shadow-poster: 6px 6px 0 rgba(26, 42, 45, 1);
}

/* ---------- Base / Semantic element styles -------------------------------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-poster);
  text-transform: uppercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-poster);
  text-transform: uppercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.script,
.kbb-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-secondary);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lede {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
}

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