/* ====================================================================
   Design tokens — Angie Cruise (Phase polish 2026-04-22)
   Editorial wellness blog — Cup of Jo / Wit & Delight energy.
   Warm, readable, personal, confident typography. Reading-first.
   ==================================================================== */

:root {
  /* ---------- Base surfaces ---------- */
  --color-bg:           #faf8f5;  /* Warm off-white, paper feel */
  --color-bg-soft:      #f5f1ec;  /* Alt sections */
  --color-bg-deep:      #ede7dd;  /* Footer — warm paper deepening */
  --color-surface:      #ffffff;  /* Cards */
  --color-text:         #2a2823;  /* Warm near-black */
  --color-text-muted:   #6b6860;  /* Body meta */
  --color-text-subtle:  #747168;  /* Fine print, broken-link note — WCAG AA (4.60:1 on bg, 3.97:1 on bg-deep) */
  --color-border:       #e8e3dc;
  --color-border-soft:  #efebe3;

  /* ---------- Brand accents ---------- */
  --color-accent:       #7a9b6f;  /* Sage — primary */
  --color-accent-dark:  #5e7a57;  /* Hover */
  --color-accent-soft:  #edf1ea;  /* Tag bg / hover tints */
  --color-accent-ink:   #3d5237;  /* Deepest sage — for drop caps etc */

  --color-warm:         #c97d5d;  /* Terracotta — recipes / DIY warmth */
  --color-warm-soft:    #f5e8df;

  /* ---------- Category accents ---------- */
  --color-cat-clean-living:      #7a9b6f;
  --color-cat-clean-living-soft: #edf1ea;
  --color-cat-clean-living-ink:  #3d5237;
  --color-cat-recipes:           #c97d5d;
  --color-cat-recipes-soft:      #f5e8df;
  --color-cat-recipes-ink:       #7a4433;
  --color-cat-diy-essential-oils:      #b08968;
  --color-cat-diy-essential-oils-soft: #f0e6d9;
  --color-cat-diy-essential-oils-ink:  #6b4e34;
  --color-cat-business-blogging:       #8b7a9b;
  --color-cat-business-blogging-soft:  #ece6f2;
  --color-cat-business-blogging-ink:   #4d405a;

  /* ---------- Typography ---------- */
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Expanded type scale */
  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 17px;
  --fs-md:   19px;          /* Article body default */
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  80px;          /* Editorial article title on desktop */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-body:    1.8;        /* Long-form reading */
  --lh-relaxed: 1.9;

  /* ---------- Spacing ---------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  6px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* Section rhythm — desktop is generous; mobile reduces. */
  --section-y:        88px;
  --section-y-sm:     64px;
  --section-y-hero:   112px;

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ---------- Shadows (subtle, warm-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(42, 40, 35, 0.04), 0 1px 3px rgba(42, 40, 35, 0.06);
  --shadow-md: 0 4px 10px rgba(42, 40, 35, 0.05), 0 2px 6px rgba(42, 40, 35, 0.04);
  --shadow-lg: 0 18px 40px rgba(42, 40, 35, 0.08), 0 6px 16px rgba(42, 40, 35, 0.05);

  /* ---------- Motion (consistent 300ms polite) ---------- */
  --duration-fast: 180ms;
  --duration-base: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --container-narrow: 680px;   /* Article body — optimal reading */
  --container-reading: 720px;  /* Slightly wider for headers/intros */
  --container-md:     960px;
  --container-lg:     1200px;
  --container-xl:     1320px;
  --nav-height:       72px;

  /* Decorative accents */
  --rule-hairline: 1px solid var(--color-border);
  --rule-accent:   1px solid var(--color-accent);
}

/* ---------- Focus ring (a11y) ---------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(122, 155, 111, 0.2);  /* sage @ 20% */
  color: var(--color-text);
}
::-moz-selection {
  background: rgba(122, 155, 111, 0.2);
  color: var(--color-text);
}

/* ---------- Scrollbar (desktop only; mobile uses system defaults) ---------- */
@media (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-soft);
    background-clip: padding-box;
  }
}