/* ==========================================================================
   ZEN W/ JEN — DESIGN TOKENS
   Calming Coastal + joyful pops · scrapbook feel · handwritten headings
   --------------------------------------------------------------------------
   Variable names mirror Automatic.css (ACSS) conventions so this ports
   straight into the ACSS dashboard later (Primary/Secondary/Tertiary/Accent/
   Base/Neutral · shade suffixes ultra-light…ultra-dark, hover · fluid type
   var(--h1..h6), var(--text-*) · spacing var(--space-*), var(--section-space-*)).
   All sizing is rem / fluid — never px — per ACSS.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..500&family=Caveat:wght@500;600;700&display=swap");

:root {
  /* ----------------------------------------------------------------------
     COLOR — Primary · Sage "Drift"  (calming coastal lead)
     ---------------------------------------------------------------------- */
  --primary-ultra-light: #eaf0ee;
  --primary-light:       #c9d8d3;
  --primary-semi-light:  #bccec8;
  --primary:             #aec4be;
  --primary-semi-dark:   #8aa8a1;
  --primary-dark:        #6b8b83;
  --primary-ultra-dark:  #46615b;
  --primary-hover:       #9bb5ae;

  /* COLOR — Secondary · Ocean Blue  (coastal depth, links) */
  --secondary-ultra-light: #e1ecf0;
  --secondary-light:       #a9c8d3;
  --secondary-semi-light:  #8db5c3;
  --secondary:             #6f9fb3;
  --secondary-semi-dark:   #5c8a9d;
  --secondary-dark:        #4a7a8d;
  --secondary-ultra-dark:  #2e5060;
  --secondary-hover:       #5f93a8;

  /* COLOR — Tertiary · Sun Yellow  (joyful pop) */
  --tertiary-ultra-light: #fcf0cf;
  --tertiary-light:       #f8dd96;
  --tertiary-semi-light:  #f6d37a;
  --tertiary:             #f4c95b;
  --tertiary-semi-dark:   #e8b73f;
  --tertiary-dark:        #d9a92e;
  --tertiary-ultra-dark:  #a87e1a;
  --tertiary-hover:       #eebe45;

  /* COLOR — Accent · Coral  (CTAs, the joyful pop) */
  --accent-ultra-light: #fbe0d3;
  --accent-light:       #f6b594;
  --accent-semi-light:  #f39e76;
  --accent:             #f0875a;
  --accent-semi-dark:   #e5743f;
  --accent-dark:        #d5663a;
  --accent-ultra-dark:  #a84a24;
  --accent-hover:       #e5743f;

  /* COLOR — Blossom Pink  (scrapbook accent · not an ACSS slot, kept as token) */
  --blossom-ultra-light: #fbeaec;
  --blossom-light:       #f8d6d9;
  --blossom:             #f2b6bb;
  --blossom-dark:        #e08a92;
  --blossom-ultra-dark:  #b85d66;

  /* COLOR — Base  (warm backgrounds — never stark white) */
  --base:            #faf7ef;  /* default page background — warm near-white  */
  --bg-ultra-light:  #fcfbf6;  /* lightest surface                          */
  --bg-light:        #f4f1e7;  /* "Shell" cream — alt section background     */
  --bg-sand:         #e9dfca;  /* "Sand" — deeper warm surface / dividers    */
  --bg-dark:         #2e3a39;  /* dark section background                    */
  --bg-ultra-dark:   #193d40;  /* "Kelp" — deepest section background        */
  --body-bg-color:   var(--base);
  --white:           #ffffff;
  --black:           #14201f;

  /* COLOR — Neutral  (text, borders, muted) */
  --neutral-ultra-light: #f1efe6;
  --neutral-light:       #d9d3c4;
  --neutral:             #6e7c7a;  /* muted text                             */
  --neutral-dark:        #4a5655;
  --neutral-ultra-dark:  #2e3a39;
  --text:                #2e3a39;  /* body text                              */
  --text-muted:          #6e7c7a;
  --heading-color:       #193d40;  /* "Kelp" deep teal                       */
  --border-color:        #e4decf;  /* sandy hairline border                  */

  /* COLOR — Semantic / status */
  --info:    #6f9fb3;
  --success: #7fa88a;
  --warning: #f4c95b;
  --danger:  #d96b5a;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --heading-font-family: "Fraunces", Georgia, "Times New Roman", serif;
  --text-font-family:    "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --script-font-family:  "Caveat", "Segoe Script", cursive; /* handwritten / scrapbook */

  /* Fluid heading scale — clamp(min, preferred, max) */
  --h1: clamp(2.75rem, 1.9rem + 4.2vw, 5rem);
  --h2: clamp(2.15rem, 1.6rem + 2.7vw, 3.5rem);
  --h3: clamp(1.7rem, 1.4rem + 1.5vw, 2.5rem);
  --h4: clamp(1.4rem, 1.25rem + 0.8vw, 1.85rem);
  --h5: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --h6: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);

  --heading-line-height:    1.08;
  --heading-letter-spacing: -0.015em;
  --heading-weight:         600;

  /* Fluid body text scale — M is the base */
  --text-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-s:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-m:   clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-l:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl:  clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
  --text-xxl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);

  --text-line-height:    1.7;
  --text-letter-spacing: 0;

  /* Eyebrow / tracked uppercase label */
  --eyebrow-letter-spacing: 0.18em;
  --eyebrow-size:           var(--text-xs);

  /* ----------------------------------------------------------------------
     SPACING — fluid, ACSS t-shirt scale
     ---------------------------------------------------------------------- */
  --space-xs:  clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-s:   clamp(0.875rem, 0.8rem + 0.4vw, 1.25rem);
  --space-m:   clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
  --space-l:   clamp(2rem, 1.7rem + 1.5vw, 3.25rem);
  --space-xl:  clamp(3rem, 2.5rem + 2.5vw, 5rem);
  --space-xxl: clamp(4.5rem, 3.6rem + 4.5vw, 8rem);

  /* Section rhythm */
  --section-space-s:   clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --section-space-m:   clamp(3.5rem, 2.8rem + 3.5vw, 6rem);
  --section-space-l:   clamp(4.5rem, 3.5rem + 5vw, 8rem);
  --section-space-xl:  clamp(6rem, 4.5rem + 7vw, 10rem);

  /* Layout */
  --content-width:   75rem;   /* 1200px */
  --content-narrow:  44rem;   /* prose / readable measure */
  --gutter:          clamp(1.25rem, 0.8rem + 2.25vw, 2.5rem);
  --container-gap:   var(--space-l);
  --content-gap:     var(--space-s);
  --grid-gap:        var(--space-m);

  /* ----------------------------------------------------------------------
     RADII · BORDERS · SHADOWS · MOTION
     ---------------------------------------------------------------------- */
  --radius-s:     0.375rem;
  --radius:       0.625rem;   /* global default */
  --radius-l:     1.25rem;
  --radius-xl:    2rem;
  --radius-round: 999px;

  --border:       1px solid var(--border-color);
  --border-width: 1px;

  /* Soft, diffuse coastal shadows */
  --shadow-s:  0 1px 2px rgba(25, 61, 64, 0.06), 0 2px 6px rgba(25, 61, 64, 0.05);
  --shadow-m:  0 4px 10px rgba(25, 61, 64, 0.07), 0 10px 24px rgba(25, 61, 64, 0.06);
  --shadow-l:  0 12px 28px rgba(25, 61, 64, 0.10), 0 24px 56px rgba(25, 61, 64, 0.08);
  /* Scrapbook "photo" shadow — slightly warmer, grounded */
  --shadow-photo: 0 2px 4px rgba(25, 61, 64, 0.10), 0 14px 30px rgba(25, 61, 64, 0.12);

  --transition-duration: 0.3s;
  --transition-timing:   cubic-bezier(0.4, 0, 0.2, 1);
  --transition:          var(--transition-duration) var(--transition-timing);
}