/* =============================================================
   Best Italian — Colors & Type
   "From Italy, with love."
   ============================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Fineday";
  src: url("fonts/Fineday-StyleOne.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Letterhack Serif";
  src: url("fonts/CCLetterhackSerif-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body fallback — substituted from Google Fonts (Lora) until a
   licensed body serif is supplied. Flagged in README. */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Oswald:wght@500;600;700&display=swap");

:root {
  /* ---------- Brand colors (official Pantone-matched) ---------- */
  --bi-basilico:   #267D3E;  /* primary   — Pantone 6174 C — fresh basil */
  --bi-cipresso:   #395854;  /* secondary — Pantone 6199 C — Tuscan cypress */
  --bi-pistacchio: #B5C1A1;  /* tertiary  — Pantone 5477 C — pistachio */
  --bi-basilico-deep:   #1d5a30;
  --bi-basilico-bright: #3a9c56;

  /* Aliases — old token names continue to work */
  --bi-basil:        var(--bi-basilico);
  --bi-pine:         var(--bi-cipresso);
  --bi-sage:         var(--bi-pistacchio);
  --bi-basil-deep:   var(--bi-basilico-deep);
  --bi-basil-bright: var(--bi-basilico-bright);

  /* ---------- Neutrals (warm, paper-y) ---------- */
  --bi-espresso:  #2e2925;  /* darkest — text, ink rules */
  --bi-hazelnut:  #8a7f72;  /* muted / meta */
  --bi-polenta:   #f5ecd9;  /* default page background */
  --bi-ricotta:   #fbf7ec;  /* lightest — cards, inputs */
  --bi-white:     #ffffff;

  /* Aliases — old token names continue to work */
  --bi-charcoal:  var(--bi-espresso);
  --bi-stone:     var(--bi-hazelnut);
  --bi-nocciola:  var(--bi-hazelnut);
  --bi-cream:     var(--bi-polenta);
  --bi-bone:      var(--bi-ricotta);

  /* ---------- Semantic tokens (green-only) ---------- */
  --bi-bg:           var(--bi-cream);
  --bi-surface:      var(--bi-bone);
  --bi-surface-2:    var(--bi-bone);
  --bi-surface-dark: var(--bi-charcoal);

  --bi-fg-1:         var(--bi-charcoal);   /* primary text */
  --bi-fg-2:         var(--bi-pine);       /* secondary text */
  --bi-fg-3:         var(--bi-stone);      /* tertiary / muted */
  --bi-fg-on-dark:   var(--bi-cream);

  --bi-accent:       var(--bi-basil);
  --bi-accent-hover: var(--bi-basil-deep);
  --bi-accent-cool:  var(--bi-pine);       /* alt emphasis */
  --bi-accent-soft:  var(--bi-sage);       /* backgrounds, soft fills */

  --bi-border:       #d8cdb6;              /* warm hairline on cream */
  --bi-border-strong:var(--bi-pine);
  --bi-border-ink:   var(--bi-charcoal);

  /* ---------- Radii ---------- */
  --bi-radius-xs:    2px;
  --bi-radius-sm:    4px;
  --bi-radius-md:    8px;
  --bi-radius-lg:    14px;
  --bi-radius-xl:    22px;
  --bi-radius-pill:  999px;

  /* ---------- Spacing scale ---------- */
  --bi-space-1:      4px;
  --bi-space-2:      8px;
  --bi-space-3:      12px;
  --bi-space-4:      16px;
  --bi-space-5:      24px;
  --bi-space-6:      32px;
  --bi-space-7:      48px;
  --bi-space-8:      64px;
  --bi-space-9:      96px;

  /* ---------- Shadows (warm, soft) ---------- */
  --bi-shadow-sm:    0 1px 2px rgba(60, 40, 20, 0.08);
  --bi-shadow-md:    0 4px 14px rgba(60, 40, 20, 0.10);
  --bi-shadow-lg:    0 14px 36px rgba(40, 30, 15, 0.16);
  --bi-shadow-stamp: 0 0 0 1px var(--bi-charcoal), 4px 4px 0 0 var(--bi-charcoal);

  /* ---------- Type families ---------- */
  --bi-font-script:  "Fineday", "Pacifico", "Brush Script MT", cursive;
  --bi-font-display: "Letterhack Serif", "IM Fell DW Pica", "Playfair Display", Georgia, serif;
  --bi-font-serif:   "Lora", "Cardo", Georgia, "Times New Roman", serif;
  --bi-font-sans:    "Oswald", "Bebas Neue", "Helvetica Neue", Arial, sans-serif;  /* condensed sans for caps / nav */
  --bi-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* =============================================================
   Semantic type styles — apply directly or via mixin classes
   ============================================================= */

html, body {
  background: var(--bi-bg);
  color: var(--bi-fg-1);
  font-family: var(--bi-font-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wordmark / brand mark — only ever the script font */
.bi-wordmark {
  font-family: var(--bi-font-script);
  font-weight: 400;
  color: var(--bi-basil);
  letter-spacing: 0;
  line-height: 0.9;
}

/* Hero / display — letterpress serif, caps, slight tracking */
.bi-display, h1.bi {
  font-family: var(--bi-font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bi-charcoal);
}

/* Section header */
.bi-h1, h1 {
  font-family: var(--bi-font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bi-charcoal);
}

.bi-h2, h2 {
  font-family: var(--bi-font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bi-charcoal);
}

.bi-h3, h3 {
  font-family: "Sofia Pro", "sofia-pro", "Mulish", "Avenir Next", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
  color: var(--bi-charcoal);
  font-style: italic;
}

/* Eyebrow / tagline — small condensed caps, tracked */
.bi-eyebrow {
  font-family: var(--bi-font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bi-basil);
}

/* Body */
.bi-body, p {
  font-family: var(--bi-font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--bi-fg-1);
  text-wrap: pretty;
}

.bi-body-sm {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bi-fg-2);
}

.bi-lede {
  font-family: var(--bi-font-serif);
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: var(--bi-fg-2);
}

/* Script flourish — pull quotes, signatures, "specials" tags */
.bi-script {
  font-family: var(--bi-font-script);
  color: var(--bi-basil);
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.9;
}

/* Button / label / nav */
.bi-label, button, .bi-nav-item {
  font-family: var(--bi-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Price / numeric */
.bi-price {
  font-family: var(--bi-font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--bi-charcoal);
}

/* Mono — receipts, code blocks (rare) */
.bi-mono, code {
  font-family: var(--bi-font-mono);
  font-size: 13px;
  color: var(--bi-fg-2);
}

/* Fork dingbat — used in the logo, useful as a separator */
.bi-dingbat::before { content: "❦"; }  /* fallback floral */
.bi-fork-rule {
  display: inline-flex;
  align-items: center;
  gap: var(--bi-space-3);
  color: var(--bi-charcoal);
  font-family: var(--bi-font-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.bi-fork-rule::before,
.bi-fork-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  min-width: 24px;
}