/* Design tokens — recipe index (Figma Desktop 1:25, wT67AZQXwdQ1fGS98x58Gz) */
/* rem-based lengths assume 1rem = 16px (browser default); px kept where Figma uses non-16px-multiple widths. */

:root {
  /* Color */
  --color-recipe-index-bg: #f0ede8;
  --color-recipe-index-text: #373330;

  /* Typography */
  --font-serif-display: "Crimson Text", Georgia, "Times New Roman", serif;
  --font-mono-ui: "JetBrains Mono", ui-monospace, monospace;

  --recipe-index-title-size: clamp(2rem, 6vw, 3rem);
  --recipe-index-title-weight: 400;
  --recipe-index-mono-size: 1rem;
  --recipe-index-line-tight: 1.15;
  --recipe-index-line-body: 1.5;

  /* Layout */
  --recipe-index-content-max: 32rem;
  --recipe-index-padding-top: 5.5rem;
  --recipe-index-padding-x: clamp(1.25rem, 8vw, 8rem);
  --recipe-index-section-gap: 4.5rem;
  --recipe-index-block-gap: 1.5rem;
  --recipe-index-hover-preview-width: 120px;
  --recipe-index-hover-preview-gap: 0.75rem;

  /* Focus */
  --recipe-index-focus-ring: 2px solid #373330;
  --recipe-index-focus-offset: 3px;

  /* Recipe detail (Figma: mobile 91:1463, medium 91:1418, large 91:1286) */
  --color-recipe-detail-bg: #f0ede8;
  --color-recipe-detail-text: #373330;
  --color-recipe-detail-text-secondary: rgba(55, 51, 48, 0.7);
  --color-recipe-detail-border: rgba(55, 51, 48, 0.6);

  /* Document design breakpoints; do not use var() inside @media (unsupported in WebKit/Safari). */
  --recipe-detail-bp-md: 560px;
  --recipe-detail-bp-lg: 980px;

  --recipe-detail-index-size: 1rem;
  --recipe-detail-index-lh: 1.5rem;
  --recipe-detail-index-tracking: 0.01em;

  /* Fluid type; bounds = former mobile / large */
  --recipe-detail-title-size: clamp(2.5rem, 6.5vw, 3.5rem);

  --recipe-detail-meta-size: 1.25rem;
  --recipe-detail-meta-lh: 1.5rem;

  --recipe-detail-ingredient-size: 0.875rem;
  --recipe-detail-ingredient-lh: 1.5rem;
  --recipe-detail-ingredient-tracking: 0.01em;

  --recipe-detail-method-size: 1.25rem;
  --recipe-detail-method-lh: 1.5rem;
  --recipe-detail-method-font-family: var(--font-serif-display);
  --recipe-detail-method-font-weight: 400;

  --recipe-detail-recipe-max: 33rem; /* 528px */
  --recipe-detail-method-max: 27.25rem; /* 436px */
  --recipe-detail-sidebar-max: 10.625rem;

  --recipe-detail-gap-section: 2.5rem;
  --recipe-detail-gap-ingredients: 1rem;
  --recipe-detail-gap-meta: 2.5rem;
  --recipe-detail-pad-x-mobile: 1.5rem;
  --recipe-detail-pad-top-mobile: 4.25rem; /* 68px */
  --recipe-detail-hero-pad-bottom-mobile: 2.5rem; /* 40px */
  --recipe-detail-pad-top-header: 4.25rem;
  /* Sticky back row height: used to pull grid to viewport top so sidebar border is flush */
  --recipe-detail-sticky-header-offset: 5.5rem;
  --recipe-detail-pad-method-y: 4.25rem;
  --recipe-detail-pad-method-bottom-md: 7rem; /* 112px */
  --recipe-detail-source-gap-after-method: 2rem;
  --recipe-detail-source-gap-internal: 0.5rem; /* 8px */
  --recipe-detail-source-pad-bottom: 3rem; /* 48px */
  --recipe-detail-grid-gap: 1.25rem;

  /* 16-col recipe detail: 1.25rem gutters (medium 11+5 cols, large 2+10+4 cols) */
  --recipe-detail-layout-max-lg: 100rem;
  --recipe-detail-grid-gutter: 1.25rem; /* 20px */
  --recipe-detail-sidebar-pad-x: 1.25rem; /* 20px */
  --recipe-detail-back-inset: 1.25rem; /* 20px */
  --recipe-detail-back-inset-lg: 2.5rem; /* 40px */
  --recipe-detail-main-pad-left-md: 2.5rem; /* 40px */
  --recipe-detail-main-pad-right-md: 1.25rem; /* 20px */
}