/* ============================================================
   WISEnest Journal — Design Tokens
   Edit this file to retune the entire site's look.
   ============================================================ */

:root {
  /* ---- Brand palette ----
     Roles map directly to the brief. Swap hex values here
     to retune across the entire site. */

  /* NorthStar core */
  --c-navy-900: #0f1f3a;        /* deep navy, primary trust color */
  --c-navy-800: #182d52;
  --c-navy-700: #25406f;
  --c-gold-600: #c89438;        /* warm gold, North Star highlight */
  --c-gold-500: #d9a64a;
  --c-gold-200: #f3e2b6;

  /* WISEnest learning */
  --c-sage-700: #3f6b66;        /* sage/teal, learning moments */
  --c-sage-500: #6a9893;
  --c-sage-200: #cfdedb;
  --c-sage-50:  #eef4f2;

  /* Neutrals */
  --c-cream:    #fbf8f3;        /* warm page background */
  --c-paper:    #ffffff;
  --c-ink:      #1a1f2c;        /* body text */
  --c-ink-soft: #4a5366;
  --c-ink-mute: #76808f;
  --c-rule:    #e7e2d6;         /* warm hairline borders */

  /* Program accents — used for category chips, post hero
     ribbons, and the post-footer CTA module. Each has a
     light surface variant for tinted backgrounds.
     ⚠ Don't rely on color alone — every category also
     carries a label and an icon. */
  --c-wheelwise:        #1f7a8c;  --c-wheelwise-50:  #e3f0f3;
  --c-teenwise:         #5b4b9f;  --c-teenwise-50:   #ece9f5;
  --c-safewise:         #4f7a4a;  --c-safewise-50:   #e6efe4;
  --c-carewise:         #a85a55;  --c-carewise-50:   #f5e7e5;
  --c-wisenest:         #3f6b66;  --c-wisenest-50:   #eef4f2;
  --c-founder:          #c89438;  --c-founder-50:    #faf0d8;
  --c-educator:         #25406f;  --c-educator-50:   #e4eaf2;
  --c-family:           #8a5a3b;  --c-family-50:     #f3e8dd;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale — clamp so it scales gracefully */
  --t-xs:    0.8125rem;   /* 13px metadata */
  --t-sm:    0.9375rem;   /* 15px UI / nav */
  --t-base:  1.0625rem;   /* 17px body */
  --t-lg:    1.25rem;     /* 20px lead / subsection */
  --t-xl:    clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --t-2xl:   clamp(2rem, 1.5rem + 2.6vw, 3rem);
  --t-3xl:   clamp(2.6rem, 1.8rem + 3.8vw, 4.25rem);

  /* ---- Spacing & layout ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: 2.5rem;   --s-8: 3rem;    --s-10: 4rem;
  --s-12: 5rem;    --s-16: 7rem;   --s-20: 9rem;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(15, 31, 58, 0.06), 0 1px 3px rgba(15, 31, 58, 0.04);
  --shadow:    0 4px 12px rgba(15, 31, 58, 0.06), 0 2px 6px rgba(15, 31, 58, 0.04);
  --shadow-lg: 0 18px 40px rgba(15, 31, 58, 0.12);

  --container: 72rem;     /* 1152px main column */
  --container-narrow: 42rem;  /* ~672px reading column */

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}