:root {
  /* ── Neutrals ── */
  --warm-white:    #FDF8F0;
  --cream:         #FAF0DC;
  --paper:         #F0E0C0;
  --ink:           #3A2818;
  --ink-lt:        #7A5838;

  /* ── Accent palette ── */
  --peach:         #F0B888;
  --peach-dk:      #D48858;
  --coral:         #E07848;
  --coral-dk:      #B85028;
  --dusty-pink:    #E0A898;
  --dusty-pink-dk: #B87868;
  --maize:         #E8C850;
  --maize-dk:      #C89828;
  --sage:          #90B878;
  --sage-dk:       #609050;
  --teal:          #78A8C0;
  --teal-dk:       #487888;
  --lavender:      #C0A8D8;
  --lavender-dk:   #8878A8;

  /* ── Fonts ── */
  --font-display: 'Lilita One', sans-serif;
  --font-ui:      'Nunito', sans-serif;

  /* ── Type scale (rem, relative to 16px root) ── */
  --text-2xs:  0.62rem;   /*  ~10px — labels, tags */
  --text-xs:   0.75rem;   /*  ~12px — card subtext, meta */
  --text-sm:   0.85rem;   /*  ~14px — nav, secondary UI */
  --text-base: 1rem;      /*   16px — body, recipe title */
  --text-lg:   1.15rem;   /*  ~18px — section labels */
  --text-xl:   1.35rem;   /*  ~22px — navbar logo */
  --text-2xl:  1.9rem;    /*  ~30px — page titles */
  --text-3xl:  2rem;      /*   32px — recipe name */
  --text-hero: 2.8rem;    /*  ~45px — hero h1 */

  /* ── Spacing scale (4px base unit) ── */
  --space-1:  0.25rem;    /*  4px */
  --space-2:  0.5rem;     /*  8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-7:  1.75rem;    /* 28px */
  --space-8:  2rem;       /* 32px */
  --space-9:  2.25rem;    /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-full: 9999px;

  /* ── Sizing ── */
  --avatar-sm:     46px;   /* recipe row photo */
  --avatar-lg:     68px;   /* category header icon */
  --card-img:      96px;   /* category card image */
  --icon-md:       20px;   /* inline icons (search, etc.) */
  --content-width: 900px;  /* max page content width */
  --search-width:  500px;  /* hero search max-width */
  --toast-width:   360px;  /* max toast width */
  --stripe-unit:   10px;   /* hero triple-stripe band height */

  /* ── Motion ── */
  --duration-fast: 0.15s;
  --duration-base: 0.3s;

  /* ── Z-index ── */
  --z-overlay: 1000;

  /* ── Shadows ── */
  --shadow-sm:     0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-md:     0 4px 18px rgba(0, 0, 0, 0.09);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.11);
  --shadow-card:   0 3px 10px rgba(0, 0, 0, 0.09);
  --shadow-inset:  0 2px 5px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.5);
  --shadow-navbar: 0 2px 12px rgba(208, 128, 80, 0.15);
  --shadow-hero:   0 4px 10px rgba(58, 40, 24, 0.14);
  --shadow-btn:    0 4px 0 var(--coral-dk), 0 5px 14px rgba(0, 0, 0, 0.1);

  /* ── Card background gradients (cycle by column index) ── */
  --card-bg-0: linear-gradient(170deg, #FDD8B0, #F0B880);
  --card-bg-1: linear-gradient(170deg, #F8C8C0, #E09898);
  --card-bg-2: linear-gradient(170deg, #FCEEA0, #E8C858);
  --card-bg-3: linear-gradient(170deg, #C8E8B8, #90B878);
  --card-bg-4: linear-gradient(170deg, #F0C8D8, #D098A8);
  --card-bg-5: linear-gradient(170deg, #C0D8F0, #80A8C8);
  --card-bg-6: linear-gradient(170deg, #E0D0F8, #B898D8);
  --card-bg-7: linear-gradient(170deg, #C8F0E8, #78C0A8);
}