/* =========================================================
   NOURISH HABIT — DESIGN TOKENS
   "Morning light" palette. Built for a WP theme: every value
   here should map 1:1 to a future theme.json / customizer field.
   ========================================================= */

:root {
  /* ---- Color: Morning Light palette ---- */
  --color-paper:        #FBF9F4;   /* page background, warm not stark */
  --color-paper-dim:     #F3EFE6;   /* subtle section break background */
  --color-sage-tint:     #ECF0E6;   /* soft accent background (cards, callouts) */
  --color-ink:           #1C2A20;   /* primary text — deep ink-green, not pure black */
  --color-ink-soft:      #4B5A4F;   /* secondary text */
  --color-ink-faint:     #7C8A7E;   /* tertiary / meta text */
  --color-sage:          #6E8061;   /* primary accent — links, icons, active states */
  --color-sage-deep:     #4F5F45;   /* sage hover/active, headings on tint bg */
  --color-clay:          #C1623F;   /* secondary accent — CTAs, highlights, badges */
  --color-clay-deep:     #A14E30;   /* clay hover */
  --color-line:          #E2DDD0;   /* hairline borders */
  --color-line-soft:     #EDE9DC;
  --color-white:         #FFFFFF;
  --color-overlay:       rgba(18, 26, 20, 0.55); /* image text overlays */
  --color-focus:         #2F6FB3;   /* accessible focus ring — distinct from brand hues on purpose */

  /* Semantic */
  --color-bg:            var(--color-paper);
  --color-bg-alt:        var(--color-paper-dim);
  --color-text:           var(--color-ink);
  --color-text-muted:     var(--color-ink-soft);
  --color-text-faint:     var(--color-ink-faint);
  --color-accent:         var(--color-sage);
  --color-accent-deep:    var(--color-sage-deep);
  --color-cta:            var(--color-clay);
  --color-cta-deep:       var(--color-clay-deep);
  --color-border:         var(--color-line);

  /* Category colors (used for badges, mapped from WP term meta later) */
  --cat-nutrition:   #C1623F;
  --cat-fitness:     #4F5F45;
  --cat-sleep:       #3D5A73;
  --cat-mindset:     #8A5A8C;
  --cat-longevity:   #6E8061;
  --cat-productivity:#A1742E;

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-2xs:  0.72rem;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  2.875rem;
  --fs-4xl:  3.5rem;
  --fs-5xl:  4.25rem;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --ls-tight: -0.02em;
  --ls-wide:  0.08em;
  --ls-wider: 0.14em;

  /* ---- Layout ---- */
  --maxw-page:    1320px;
  --maxw-content: 760px;
  --maxw-narrow:  600px;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 42, 32, 0.06), 0 1px 1px rgba(28, 42, 32, 0.04);
  --shadow-md: 0 6px 16px rgba(28, 42, 32, 0.08), 0 2px 4px rgba(28, 42, 32, 0.05);
  --shadow-lg: 0 16px 40px rgba(28, 42, 32, 0.12), 0 4px 10px rgba(28, 42, 32, 0.06);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --header-h: 76px;
}

/* Dark-on-image text contexts (hero overlays) reuse the same scale with light text */
.on-image {
  --color-text: #FBF9F4;
  --color-text-muted: #E7E2D4;
  --color-text-faint: #CFC9B8;
}

/* Headings are hardcoded to var(--color-ink) in base — override explicitly here */
.on-image h1,
.on-image h2,
.on-image h3,
.on-image h4 {
  color: #FBF9F4;
  /* Layered text-shadow stack: works on any background image, light or dark.
     Inner tight blur kills the exact pixels under each letter.
     Outer soft blur builds a diffuse halo for depth. */
  text-shadow:
    0 1px 2px  rgba(0,0,0,0.55),
    0 2px 8px  rgba(0,0,0,0.45),
    0 4px 24px rgba(0,0,0,0.35);
}

.on-image p,
.on-image span,
.on-image .meta-row,
.on-image .meta-row__author {
  color: #E7E2D4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}