/* ==========================================================================
   PALATEFUL — DESIGN TOKENS
   Colour, type, space, image and motion rules for the whole publication.
   Every value below is derived from the Palateful logo: the forest greens of
   the leaves, the terracotta and warm brown of the plate, the rice-white of
   the centre, and the restrained turmeric/chilli accents of the food.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand colour ----------------------------------------------------- */
  --pf-forest-900: #12241d;
  --pf-forest-800: #1a3128;
  --pf-forest-700: #234639; /* primary brand green — from the logo wordmark */
  --pf-forest-600: #2f5a49;
  --pf-forest-500: #3c6e59;
  --pf-moss-500: #6a8574;   /* muted green — leaf veins */
  --pf-moss-300: #a8bcae;

  --pf-terracotta: #a9503c; /* plate rim */
  --pf-terracotta-dark: #8b3f2e;
  --pf-terracotta-soft: #c7745e;

  --pf-brown-800: #40241d;  /* deep plate brown */
  --pf-brown-600: #6b3b30;

  --pf-saffron: #d99b2e;    /* restrained food accent */
  --pf-chilli: #c0452e;

  /* ---- Surfaces --------------------------------------------------------- */
  --pf-rice: #fffdf8;       /* rice-white, the lightest surface */
  --pf-cream: #faf6ee;      /* default page ground */
  --pf-cream-warm: #f2eade; /* alternating band */
  --pf-sand: #e8dfd0;       /* image placeholder / dividers */

  /* ---- Ink -------------------------------------------------------------- */
  --pf-ink: #1c1a17;
  --pf-ink-soft: #48423a;
  --pf-ink-muted: #7c746a;
  --pf-ink-faint: #a49b8f;
  --pf-on-dark: #f2ece1;
  --pf-on-dark-muted: #b6ae9f;

  /* ---- Semantic roles --------------------------------------------------- */
  --bg: var(--pf-cream);
  --bg-alt: var(--pf-cream-warm);
  --bg-raised: var(--pf-rice);
  --bg-invert: var(--pf-forest-900);
  --text: var(--pf-ink);
  --text-soft: var(--pf-ink-soft);
  --text-muted: var(--pf-ink-muted);
  --accent: var(--pf-terracotta);
  --brand: var(--pf-forest-700);
  --rule: rgba(28, 26, 23, 0.14);
  --rule-strong: rgba(28, 26, 23, 0.28);
  --rule-invert: rgba(242, 236, 225, 0.2);

  /* ---- Typefaces -------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia,
    'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* ---- Type scale (fluid) ------------------------------------------------
     Magazine-scale headlines that still behave on a 360px phone.            */
  --fs-display: clamp(3rem, 1.5rem + 6.2vw, 7rem);
  --fs-h1: clamp(2.3rem, 1.45rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.35rem, 1.13rem + 1vw, 2rem);
  --fs-h4: clamp(1.1rem, 1.02rem + 0.36vw, 1.35rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.42vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-label: 0.6875rem;

  --lh-display: 0.98;
  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.68;
  --lh-ui: 1.4;

  --ls-display: -0.022em;
  --ls-heading: -0.014em;
  --ls-label: 0.18em;
  --ls-meta: 0.06em;

  --wt-light: 300;
  --wt-regular: 400;
  --wt-medium: 500;
  --wt-semi: 600;
  --wt-bold: 700;

  /* ---- Space (4px base) -------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* Vertical rhythm between major editorial sections. */
  --section-y: clamp(3.75rem, 7vw, 8rem);
  --section-y-lg: clamp(5rem, 9vw, 11rem);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1440px;
  --container-narrow: 1120px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 68ch;      /* prose line length */
  --measure-tight: 56ch;
  /* Tall enough for the supplied logo's wordmark to stay legible. */
  --header-h: 96px;

  /* ---- Image rules -------------------------------------------------------
     Images are compositional, not decorative cards. These ratios are the only
     crops used across the site so photography stays consistent.             */
  --ar-hero: 16 / 9;
  --ar-hero-mobile: 4 / 5;
  --ar-landscape: 3 / 2;
  --ar-wide: 21 / 9;
  --ar-portrait: 4 / 5;
  --ar-tall: 2 / 3;
  --ar-square: 1 / 1;

  /* ---- Radius & elevation ------------------------------------------------
     Deliberately minimal. Editorial print does not have rounded cards.      */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-lift: 0 18px 46px -28px rgba(28, 26, 23, 0.5);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-editorial: cubic-bezier(0.22, 0.68, 0.16, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --dur-reveal: 900ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-search: 300;
}

@media (max-width: 900px) {
  :root {
    --header-h: 68px;
    --fs-body: 1.0625rem;
  }
}