/* =====================================================================
   SWEET HAVEN — Colors & Type
   A neapolitan patisserie palette: strawberry, vanilla, chocolate,
   with caramel & pistachio undertones. Display serif: Cormorant
   Garamond. Supporting sans: Jost.
   ===================================================================== */

/* ---- Fonts ---------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Jost is a webfont substitution for the supporting sans; load from
   Google Fonts where TTFs aren't bundled. */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300..700;1,400..500&display=swap");

:root {
  /* ============================================================
     CORE PALETTE — the six brand colors (raw)
     ============================================================ */
  --strawberry: #e5ada8;   /* dusty rose — the "strawberry" scoop */
  --vanilla:    #efe8d8;   /* warm vanilla cream */
  --chocolate:  #725c3f;   /* deep cocoa brown */
  --caramel:    #d0a77b;   /* golden caramel undertone */
  --pistachio:  #d8d7b2;   /* soft pistachio / sage undertone */
  --almond:     #e5e0d8;   /* greige almond cream */

  /* ============================================================
     STRAWBERRY scale (the primary accent)
     ============================================================ */
  --strawberry-50:  #faf0ee;
  --strawberry-100: #f4ddd9;
  --strawberry-200: #edc7c1;
  --strawberry-300: #e5ada8;  /* base */
  --strawberry-400: #d8908a;
  --strawberry-500: #c4736c;
  --strawberry-600: #a85b55;
  --strawberry-700: #834743;

  /* ============================================================
     CHOCOLATE scale (primary text + dark surfaces)
     ============================================================ */
  --chocolate-50:  #f0ebe4;
  --chocolate-100: #ddd2c4;
  --chocolate-200: #c2b09a;
  --chocolate-300: #a08967;
  --chocolate-400: #876d4d;
  --chocolate-500: #725c3f;  /* base */
  --chocolate-600: #5c4a33;
  --chocolate-700: #443628;
  --chocolate-800: #2e251b;

  /* ============================================================
     CARAMEL scale (warm secondary / dividers)
     ============================================================ */
  --caramel-100: #f1e2cf;
  --caramel-200: #e3c8a7;
  --caramel-300: #d0a77b;  /* base */
  --caramel-400: #bb8d5e;
  --caramel-500: #9e7449;

  /* ============================================================
     PISTACHIO scale (cool undertone / success-ish)
     ============================================================ */
  --pistachio-100: #eeeed7;
  --pistachio-200: #e1e0c2;
  --pistachio-300: #d8d7b2;  /* base */
  --pistachio-400: #bdbb8c;
  --pistachio-500: #9d9b6c;

  /* ============================================================
     NEUTRAL creams (vanilla / almond surfaces)
     ============================================================ */
  --cream-50:  #faf7f0;
  --cream-100: #efe8d8;  /* vanilla base */
  --cream-200: #e5e0d8;  /* almond base */
  --cream-300: #d9d2c5;
  --cream-400: #c8bfae;

  /* ============================================================
     SEMANTIC — surfaces & ink
     ============================================================ */
  --bg:            var(--cream-100);   /* default page: vanilla */
  --bg-elevated:   var(--cream-50);    /* cards float lighter */
  --bg-sunken:     var(--cream-200);   /* recessed wells */
  --bg-inverse:    var(--chocolate-700); /* dark choc sections */

  --ink:           var(--chocolate-700); /* primary text */
  --ink-soft:      var(--chocolate-500); /* secondary text */
  --ink-muted:     var(--chocolate-300); /* tertiary / captions */
  --ink-inverse:   var(--cream-50);      /* text on dark */

  --accent:        var(--strawberry-300);
  --accent-strong: var(--strawberry-500);
  --accent-ink:    var(--strawberry-700);

  --line:          rgba(114, 92, 63, 0.16); /* hairline on cream */
  --line-strong:   rgba(114, 92, 63, 0.30);

  /* status (tuned into the palette, not bright UI colors) */
  --success: var(--pistachio-500);
  --caution: var(--caramel-500);
  --error:   var(--strawberry-700);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* ============================================================
     TYPE SCALE (semantic roles)
     Display uses Cormorant; UI/body uses Jost.
     ============================================================ */
  /* Fluid type: clamp(min, preferred, max). max == the original desktop px,
     so large screens are unchanged; sizes scale smoothly down to phones. */
  --display-1: 300 clamp(2.75rem, 1.2rem + 7vw, 5.5rem)/0.98 var(--font-display);
  --display-2: 300 clamp(2.25rem, 1.1rem + 5vw, 4rem)/1.02 var(--font-display);
  --h1: 500 clamp(1.875rem, 1.2rem + 3vw, 3rem)/1.06 var(--font-display);
  --h2: 500 clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem)/1.12 var(--font-display);
  --h3: 600 clamp(1.375rem, 1.2rem + 0.9vw, 1.6875rem)/1.2 var(--font-display);
  --title: 500 20px/1.3 var(--font-sans);
  --body-lg: 400 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.6 var(--font-sans);
  --body: 400 16px/1.65 var(--font-sans);
  --body-sm: 400 14px/1.55 var(--font-sans);
  --label: 500 13px/1.2 var(--font-sans);
  --overline: 500 12px/1.2 var(--font-sans);
  --caption: 400 13px/1.4 var(--font-sans);

  /* tracking */
  --track-overline: 0.22em;  /* wide letterspacing for eyebrows */
  --track-label: 0.04em;
  --track-display: 0.005em;

  /* ============================================================
     RADII / SHADOW / SPACING
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(114, 92, 63, 0.08),
               0 2px 6px rgba(114, 92, 63, 0.06);
  --shadow-md: 0 4px 10px rgba(114, 92, 63, 0.10),
               0 12px 28px rgba(114, 92, 63, 0.10);
  --shadow-lg: 0 18px 50px rgba(114, 92, 63, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --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;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES — apply with utility classes
   ===================================================================== */
.sh-display-1 { font: var(--display-1); letter-spacing: var(--track-display); color: var(--ink); }
.sh-display-2 { font: var(--display-2); letter-spacing: var(--track-display); color: var(--ink); }
.sh-h1 { font: var(--h1); color: var(--ink); }
.sh-h2 { font: var(--h2); color: var(--ink); }
.sh-h3 { font: var(--h3); color: var(--ink); }
.sh-title { font: var(--title); color: var(--ink); letter-spacing: var(--track-label); }
.sh-body-lg { font: var(--body-lg); color: var(--ink-soft); }
.sh-body { font: var(--body); color: var(--ink-soft); }
.sh-body-sm { font: var(--body-sm); color: var(--ink-soft); }
.sh-label { font: var(--label); color: var(--ink); letter-spacing: var(--track-label); }
.sh-overline {
  font: var(--overline);
  color: var(--ink-muted);
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
}
.sh-caption { font: var(--caption); color: var(--ink-muted); }