/* ============================================================
   SHARA BILBREY — COLORS & TYPOGRAPHY
   Hard meets soft. System meets soul.
   ============================================================ */

/* ---------- Font faces ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/Playfair-VariableFont.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/Playfair-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
/* Syne — body / UI sans — pulled from Google Fonts as fallback.
   The visual guide names Syne explicitly. No local Syne files were
   supplied, so we load from Google Fonts (acceptable per guide). */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap");

:root {
  /* ---------- CORE PALETTE ---------- */
  --sb-parchment:      #F6F1E8; /* background */
  --sb-parchment-deep: #EFE7D8; /* card / inset */
  --sb-charcoal:       #2E2A27; /* headlines, body */
  --sb-burnt-orange:   #DE5500; /* hero accent, CTA */
  --sb-secondary-gray: #6B6661; /* descriptions, subtext */
  --sb-muted-clay:     #B07A6E; /* dividers, accents */
  --sb-taupe-gray:     #8C857D; /* footer, meta, captions */

  /* ---------- ATMOSPHERIC (composition only — never text/UI) ---------- */
  --sb-soft-blue:      #B8D4E3;
  --sb-gold:           #E8A817;
  --sb-blush:          #E8C8B8;

  /* ---------- DATA CARD PALETTE ---------- */
  --sb-card-rose-bg:     #E9D7D2;  --sb-card-rose-accent:   #A7655A;
  --sb-card-blue-bg:     #DDE7EA;  --sb-card-blue-accent:   #6A8F99;
  --sb-card-oat-bg:      #E8E1D1;  --sb-card-oat-accent:    #B89A63;
  --sb-card-sage-bg:     #E7E8DC;  --sb-card-sage-accent:   #6E7562;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:            var(--sb-parchment);
  --bg-inset:      var(--sb-parchment-deep);
  --fg:            var(--sb-charcoal);
  --fg-1:          var(--sb-charcoal);       /* primary text */
  --fg-2:          var(--sb-secondary-gray); /* supporting text */
  --fg-3:          var(--sb-taupe-gray);     /* meta / footer / captions */
  --accent:        var(--sb-burnt-orange);
  --accent-ink:    #B84700;                  /* hover / pressed */
  --divider:       var(--sb-muted-clay);
  --rule-hero:     var(--sb-burnt-orange);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:    "Playfair Display", "Lora", "Playfair", Georgia, "Times New Roman", serif;
  --font-sans:     "Syne", "Work Sans", "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display:    64px;  --lh-display:   1.05; /* editorial title */
  --fs-h1:         48px;  --lh-h1:        1.10;
  --fs-h2:         36px;  --lh-h2:        1.15;
  --fs-h3:         26px;  --lh-h3:        1.25;
  --fs-h4:         20px;  --lh-h4:        1.30;
  --fs-body:       17px;  --lh-body:      1.55;
  --fs-small:      14px;  --lh-small:     1.50;
  --fs-meta:       12px;  --lh-meta:      1.40;

  /* ---------- SPACING (8pt base) ---------- */
  --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;

  /* ---------- RADII (intentionally small — NO pill cards) ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;   /* max for UI surfaces */
  --radius-pill: 999px; /* only for tags/CTA bars */

  /* ---------- SHADOWS — restrained, paper-like, never glowy ---------- */
  --shadow-paper: 0 1px 2px rgba(46,42,39,0.04), 0 2px 6px rgba(46,42,39,0.05);
  --shadow-lift:  0 2px 4px rgba(46,42,39,0.05), 0 8px 18px rgba(46,42,39,0.08);

  /* ---------- BORDERS / DIVIDERS ---------- */
  --hairline:      1px solid rgba(46,42,39,0.12);
  --hairline-2:    1px solid rgba(46,42,39,0.18);
  --divider-line:  1px solid var(--sb-muted-clay);
}

/* ============================================================
   BASE ELEMENTS — semantic defaults
   ============================================================ */

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

h1, .h1, .display {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-1);
  margin: 0;
}
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}

/* ---------- UTILITY TYPE CLASSES ---------- */
.serif   { font-family: var(--font-serif); }
.sans    { font-family: var(--font-sans); }
.italic  { font-style: italic; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-meta);
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.cta-label {
  /* CTAs: sans-serif, uppercase, expanded letter-spacing */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.footer-url {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.page-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* ---------- SIGNATURE ELEMENTS ---------- */
.rule-clay {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--divider);
  border: 0;
  margin: var(--sp-4) 0;
}
.rule-orange {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--rule-hero);
  border: 0;
  margin: var(--sp-4) 0;
}
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.link-cta:hover  { color: var(--accent-ink); border-bottom-color: currentColor; }
.link-cta:active { color: var(--accent-ink); transform: translateY(1px); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--radius-1);
  transition: background-color 160ms ease, color 160ms ease, transform 80ms ease;
}
.btn-primary      { background: var(--sb-charcoal); color: var(--sb-parchment); }
.btn-primary:hover{ background: #1F1B18; }
.btn-primary:active{ transform: translateY(1px); }

.btn-accent       { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-ink); }

.btn-ghost        { background: transparent; color: var(--fg-1); border: 1px solid var(--fg-1); }
.btn-ghost:hover  { background: var(--fg-1); color: var(--sb-parchment); }

/* ---------- SELECTION ---------- */
::selection { background: var(--accent); color: #fff; }