/* ============================================================================
   Bailey Vaez — Colors & Type
   Brand palette per Pomelli brandbook, extended with warm neutrals drawn
   from brand imagery (terracotta-wall portraits) to support the "warm,
   grounded, quiet authority" tone described in the brand brief.
   ============================================================================ */

/* ---------- Webfonts ---------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/CormorantGaramond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/CormorantGaramond-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("./fonts/NunitoSans.woff2") format("woff2");
}

:root {
  /* ---------- Brand palette (from brandbook) ---------- */
  --bv-mint-teal: #49C5B6;
  --bv-brunswick: #015048;
  --bv-snow: #FAFAFA;
  --bv-jet: #000000;

  /* ---------- Extended warm neutrals (from brand imagery) ---------- */
  --bv-ink:        #1F1B17;  /* warm charcoal — primary text, headlines */
  --bv-ink-soft:   #3A332C;  /* warm secondary text */
  --bv-stone:      #6E665C;  /* meta / supporting copy */
  --bv-stone-soft: #A39C90;  /* labels, captions, disabled */
  --bv-paper:      #F6F1E8;  /* warm cream — primary surface */
  --bv-paper-deep: #ECE5D6;  /* surface variant, hover wash */
  --bv-sand:       #E4D9C6;  /* dividers, soft chips */
  --bv-clay:       #C77F66;  /* warm accent — sparingly */
  --bv-clay-soft:  #E8C6B7;  /* tint of clay */
  --bv-clay-deep:  #A8533B;  /* burnt clay — dark panel, supports white text */
  --bv-clay-wash:  #F3DFD0;  /* lightest copper wash — section backgrounds */

  /* ---------- Expressive accents (drawn from portrait palette) ---------- */
  /* Used as small pops — a single chip, a small CTA, an underline.
     Never as primary surfaces. The brand register stays cream + forest. */
  --bv-amber:     #D4A24C;  /* honey / sunlight */
  --bv-amber-soft:#F1DDB2;
  --bv-plum:      #6B3A52;  /* deep aubergine — from the silk print */
  --bv-plum-soft: #D9C2CC;
  --bv-pacific:   #2A5C8A;  /* saturated daylight blue — from the silk print */
  --bv-pacific-soft:#C7D6E4;
  --bv-persimmon: #B8483B;  /* warm fiery red — restraint required */
  --bv-persimmon-soft:#EFC5BE;

  /* ---------- Forest (deep brand) ---------- */
  --bv-forest:        #014C42;  /* primary deep — buttons, brand surfaces */
  --bv-forest-deep:   #002F2A;  /* hover / pressed */
  --bv-forest-tint:   #D9E8E5;  /* lightest wash */

  /* ---------- Teal (mint accent) ---------- */
  --bv-teal:       #49C5B6;
  --bv-teal-deep:  #2FA395;
  --bv-teal-dark:  #0C5B53;  /* deep teal — selected / active surfaces (light text) */
  --bv-teal-soft:  #B9E5DE;

  /* ---------- Semantic ---------- */
  --bv-success: #2F8A6B;
  --bv-warning: #C4894C;
  --bv-danger:  #B25245;

  /* ---------- Surfaces ---------- */
  --fg-1: var(--bv-ink);
  --fg-2: var(--bv-ink-soft);
  --fg-3: var(--bv-stone);
  --fg-4: var(--bv-stone-soft);
  --fg-inverse: var(--bv-paper);

  --bg-1: var(--bv-paper);
  --bg-2: var(--bv-paper-deep);
  --bg-3: var(--bv-sand);
  --bg-inverse: var(--bv-forest-deep);

  --border-1: rgba(31, 27, 23, 0.12);   /* hairline on cream */
  --border-2: rgba(31, 27, 23, 0.22);   /* stronger */
  --border-on-dark: rgba(246, 241, 232, 0.18);

  --accent: var(--bv-forest);
  --accent-hover: var(--bv-forest-deep);
  --accent-on: var(--bv-paper);

  /* ---------- Type families ---------- */
  --font-serif: "Cormorant Garamond", "EB Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --font-sans:  "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (display = serif, text = sans) ---------- */
  /* Display sizes lean large and airy — serif used for headlines and pull-quotes */
  --d-hero:    clamp(56px, 7vw, 96px);   /* hero headlines */
  --d-1:       clamp(44px, 5.2vw, 72px); /* page H1 */
  --d-2:       clamp(36px, 4.2vw, 56px); /* section H2 */
  --d-3:       clamp(28px, 3.2vw, 40px); /* H3, large pull-quote */
  --d-4:       clamp(22px, 2.4vw, 28px); /* H4, card title in serif */

  --t-xl:      20px;   /* lead paragraph */
  --t-lg:      18px;   /* body large */
  --t-md:      16px;   /* body */
  --t-sm:      14px;   /* small / meta */
  --t-xs:      12px;   /* eyebrow, caption */

  /* ---------- Line heights ---------- */
  --lh-tight:   1.08;   /* big serif display */
  --lh-snug:    1.18;   /* headings */
  --lh-normal:  1.5;    /* body */
  --lh-relaxed: 1.65;   /* long-form reading */

  /* ---------- Tracking ---------- */
  --tr-tight:    -0.02em;
  --tr-display:  -0.015em;
  --tr-normal:   0;
  --tr-loose:    0.04em;
  --tr-eyebrow:  0.14em;  /* uppercase labels */

  /* ---------- Spacing scale ---------- */
  --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 ---------- */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    6px;     /* default for cards / fields */
  --r-lg:    10px;
  --r-pill:  999px;

  /* ---------- Shadows (soft, on warm paper) ---------- */
  --shadow-1: 0 1px 2px rgba(31, 27, 23, 0.04), 0 1px 1px rgba(31, 27, 23, 0.03);
  --shadow-2: 0 4px 12px rgba(31, 27, 23, 0.06), 0 1px 3px rgba(31, 27, 23, 0.04);
  --shadow-3: 0 12px 36px rgba(31, 27, 23, 0.08), 0 4px 10px rgba(31, 27, 23, 0.04);
  --shadow-inset-hair: inset 0 0 0 1px var(--border-1);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;

  /* ---------- Containers ---------- */
  --container-narrow: 720px;   /* long-form reading */
  --container:        1120px;  /* default */
  --container-wide:   1280px;
}

/* ============================================================================
   Semantic type primitives
   ============================================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.bv-display, .bv-h1, .bv-h2, .bv-h3, .bv-h4 {
  font-family: var(--font-serif);
  color: var(--fg-1);
  font-weight: 500;
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

.bv-display { font-size: var(--d-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.bv-h1      { font-size: var(--d-1);    line-height: var(--lh-tight); }
.bv-h2      { font-size: var(--d-2);    line-height: var(--lh-snug); }
.bv-h3      { font-size: var(--d-3);    line-height: var(--lh-snug); }
.bv-h4      { font-size: var(--d-4);    line-height: var(--lh-snug); }

/* Italic emphasis — recurring brand motif for "humans," "real conversation," etc. */
.bv-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* Body */
.bv-lead { font-size: var(--t-xl); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; }
.bv-body { font-size: var(--t-md); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; }
.bv-body-lg { font-size: var(--t-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.bv-small { font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.bv-meta  { font-size: var(--t-xs); line-height: var(--lh-normal); color: var(--fg-3); }

/* Eyebrow — small uppercase label that sits above section titles */
.bv-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--bv-forest);
}

/* Pull-quote (serif italic, big) */
.bv-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--d-3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

/* Signature line — used for the "I don't diagnose and disappear" motif */
.bv-signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--fg-2);
}

/* Link */
.bv-link {
  color: var(--bv-forest);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.bv-link:hover { color: var(--bv-forest-deep); }

/* Divider — a hairline rule, sometimes with a serif fleuron */
.bv-rule {
  height: 1px;
  background: var(--border-1);
  border: 0;
}