/* ============================================================
   Bloei — Colors & Type
   Soft, warm, natural. Pastel rose · beige · sage.
   ============================================================ */

/* ---------- Fonts ----------
   Lato                  = brand sans         (brand-supplied)
   Cormorant Garamond    = brand display      (brand-supplied)
   Caveat                = signature accent   (Google Fonts substitute)
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');

/* --- Cormorant Garamond (brand display — variable font) --- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; src: url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; src: url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype"); font-display: swap; }

/* --- Lato (brand sans) --- */
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 100; src: url("fonts/Lato-Thin.ttf")        format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 100; src: url("fonts/Lato-ThinItalic.ttf")  format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 300; src: url("fonts/Lato-Light.ttf")       format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 300; src: url("fonts/Lato-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 400; src: url("fonts/Lato-Regular.ttf")     format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 400; src: url("fonts/Lato-Italic.ttf")      format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 700; src: url("fonts/Lato-Bold.ttf")        format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 700; src: url("fonts/Lato-BoldItalic.ttf")  format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 900; src: url("fonts/Lato-Black.ttf")       format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 900; src: url("fonts/Lato-BlackItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ---------------------------------------------------------- */
  /* CORE PALETTE — natural, warm, soft                         */
  /* ---------------------------------------------------------- */

  /* ---------------------------------------------------------- */
  /* CORE PALETTE — sage (primary) + blush (secondary) + camel  */
  /* Anchors picked by Bloei: --sage-500  = #5A7A4A             */
  /*                          --camel-400 = #C8A882             */
  /* ---------------------------------------------------------- */

  /* Sage — primary brand. Deep verdant green, leafy & calm.    */
  --sage-50:   #F0F3EB;
  --sage-100:  #DBE2CC;
  --sage-200:  #B9C8A0;
  --sage-300:  #92AC73;
  --sage-400:  #739055;
  --sage-500:  #5A7A4A;   /* ★ anchor — primary brand */
  --sage-600:  #44603A;
  --sage-700:  #2F4528;

  /* Blush — secondary accent. Soft pastel rose, gentle warmth. */
  --blush-50:  #FBF1ED;
  --blush-100: #F6E1D8;
  --blush-200: #EFCDBF;
  --blush-300: #E6B5A2;   /* secondary accent */
  --blush-400: #D8957D;
  --blush-500: #C57760;
  --blush-600: #A65A45;

  /* Camel — warm tertiary. Sandy beige, ceramics & linen.      */
  --camel-50:  #F9F2E8;
  --camel-100: #F1E4CF;
  --camel-200: #E5CFAD;
  --camel-300: #D7BC92;
  --camel-400: #C8A882;   /* ★ anchor */
  --camel-500: #B08D63;
  --camel-600: #8C6E47;

  /* Legacy aliases for old --verde-* references (deprecated).  */
  --verde-50:  var(--sage-50);
  --verde-100: var(--sage-100);
  --verde-200: var(--sage-200);
  --verde-300: var(--sage-300);
  --verde-400: var(--sage-400);
  --verde-500: var(--sage-500);
  --verde-600: var(--sage-600);
  --verde-700: var(--sage-700);

  /* Sand — paper / cream bg tones, unchanged */
  --sand-50:   #FBF7F0;
  --sand-100:  #F4ECDD;
  --sand-200:  #ECDFC8;
  --sand-300:  #DDC9A8;
  --sand-400:  #C2A87E;
  --sand-500:  #A28960;

  /* Clay — deepest brand neutral, used for body copy */
  --clay-50:   #F6F1EA;
  --clay-100:  #E8DFD0;
  --clay-300:  #9A8B79;
  --clay-500:  #5E5246;
  --clay-700:  #3B342C;
  --clay-900:  #25201B;   /* primary text */

  /* Pure */
  --cream:     #FCFAF6;
  --ink:       #25201B;

  /* ---------------------------------------------------------- */
  /* SEMANTIC COLORS                                            */
  /* ---------------------------------------------------------- */
  --bg:           var(--sand-50);
  --bg-elevated:  var(--cream);
  --bg-sunken:    var(--sand-100);
  --bg-accent:    var(--sage-50);     /* primary tinted band */
  --bg-leaf:      var(--blush-50);    /* secondary tinted band */

  --fg:           var(--clay-900);
  --fg-muted:     var(--clay-500);
  --fg-subtle:    var(--clay-300);
  --fg-on-dark:   var(--cream);
  --fg-on-blush:  var(--blush-600);
  --fg-on-sage:   var(--sage-600);

  --border:       rgba(94, 82, 70, 0.14);
  --border-soft:  rgba(94, 82, 70, 0.08);
  --border-strong:rgba(94, 82, 70, 0.28);

  --brand:        var(--sage-500);    /* PRIMARY — the brand color */
  --brand-deep:   var(--sage-700);
  --brand-soft:   var(--blush-300);   /* SECONDARY accent */
  --brand-leaf:   var(--camel-400);   /* tertiary warm */

  --success:      var(--sage-500);
  --warning:      #D89A4B;
  --danger:       #B85C4F;

  /* ---------------------------------------------------------- */
  /* TYPOGRAPHY                                                 */
  /* ---------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;  /* Bloei brand display */
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;          /* Bloei brand sans    */
  --font-hand:    "Caveat", "Snell Roundhand", cursive;                 /* signature accents only */

  /* Type scale (1.250 — Major Third, with display jumps) */
  --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:     84px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.22em;     /* small-caps eyebrows */

  /* ---------------------------------------------------------- */
  /* RADII — generous, soft. Round shapes are core to brand.    */
  /* ---------------------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-2xl: 56px;
  --r-pill: 999px;

  /* ---------------------------------------------------------- */
  /* SPACING — 4px base, with a generous outer rhythm           */
  /* ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------------------------------------------------------- */
  /* SHADOWS — diffuse, warm, never sharp                        */
  /* ---------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(94, 82, 70, 0.06);
  --shadow-sm:    0 2px 8px rgba(94, 82, 70, 0.06), 0 1px 2px rgba(94, 82, 70, 0.04);
  --shadow-md:    0 8px 24px rgba(94, 82, 70, 0.08), 0 2px 6px rgba(94, 82, 70, 0.04);
  --shadow-lg:    0 20px 48px rgba(94, 82, 70, 0.12), 0 4px 12px rgba(94, 82, 70, 0.05);
  --shadow-xl:    0 32px 80px rgba(94, 82, 70, 0.16), 0 8px 20px rgba(94, 82, 70, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(94, 82, 70, 0.06);
  --ring-focus:   0 0 0 3px rgba(90, 122, 74, 0.32);   /* verde focus ring */

  /* ---------------------------------------------------------- */
  /* MOTION                                                     */
  /* ---------------------------------------------------------- */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-petal:  cubic-bezier(0.34, 1.4, 0.64, 1);   /* gentle overshoot */
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    480ms;
}

/* ============================================================
   SEMANTIC TYPE — drop-in text styles
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
  color:       var(--fg);
  background:  var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: 500;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 500;
}

.h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-snug);
}

.p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg);
}

.p-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg-muted);
}

.p-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.signature {
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  color: var(--blush-500);
  font-weight: 500;
}

.caption {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}