/* Lena's Everyday Gourmet — Design Tokens v8
   Restrained palette: warm white backgrounds, charcoal text, olive for buttons/active states only.
*/
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500&family=Playfair+Display:wght@400;600;700&display=swap");

:root {
  /* Backgrounds */
  --bg:         #FDF9F2;   /* warm white — dominant, ~90% of all surfaces */
  --bg-card:    #FFFFFF;   /* recipe cards, form fields */
  --bg-subtle:  #F5F3EE;   /* very faint tint for alternating or inset areas */

  /* Text */
  --ink:        #292929;   /* charcoal — headings and body */
  --ink-muted:  #6b7280;   /* secondary text, metadata, captions */
  --ink-light:  #9ca3af;   /* placeholder, disabled */

  /* Brand accent — olive only for buttons and active states */
  --olive:      #364315;
  --accent:     #364315;   /* alias used throughout; same as --olive */
  --on-olive:   #FDF9F2;

  /* Borders and hairlines */
  --line:       #E5E2D8;   /* subtle border, card outlines */
  --line-mid:   #D1CDC0;   /* slightly stronger rule */

  /* Focus */
  --focus-ring: #364315;

  /* Fonts */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", system-ui, sans-serif;

  /* Type scale */
  --size-xl:  clamp(2.2rem, 5vw, 3.5rem);
  --size-h1:  clamp(1.8rem, 3.5vw, 2.5rem);
  --size-h2:  1.5rem;
  --size-h3:  1.1rem;
  --size-body: 1.0625rem;    /* 17px */
  --size-sm:   0.9375rem;   /* 15px */
  --size-xs:   0.8125rem;   /* 13px */

  /* Line heights */
  --lead-tight:  1.15;
  --lead-snug:   1.35;
  --lead-body:   1.65;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Radii */
  --r-sm:   4px;
  --r-md:   10px;
  --r-pill: 999px;

  /* Shadow — subtle, used sparingly */
  --shadow-card: 0 1px 4px rgba(41,41,41,0.07);
}

/* Dark mode: keep the warm light appearance — do not invert */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    /* intentionally empty — site is light-only by design */
  }
}