/* Zyalqmr design tokens. Values are taken from the Content Platform design. */
:root {
  /* brand */
  --c-pink: #FF2E71;
  --c-orange: #FF803A;
  --c-rose: #C22C58;          /* links */
  --c-brown: #8A5C4A;         /* category labels, prices */
  --c-danger: #9E2230;

  /* surfaces */
  --c-bg: #EFE7E2;            /* page canvas */
  --c-surface: #FFFFFF;
  --c-surface-2: #FAF7F5;     /* soft panels, chips */
  --c-tint: #FFF1EC;          /* pink tint: tags, active nav */
  --c-tint-2: #FFF7F3;        /* pale warm block */
  --c-tint-3: #FFF9F4;
  --c-dark: #27201D;          /* text + dark buttons */

  /* text */
  --c-text: #27201D;
  --c-text-2: #3E3431;
  --c-muted: #5D5350;
  --c-muted-2: #6E625E;

  /* lines */
  --c-line: #F0E6E1;
  --c-line-2: #EADFD9;
  --c-line-3: #E4D7D1;
  --c-line-4: #F5EDE9;
  --c-check: #CDBDB5;
  --c-switch-off: #D9CEC9;

  /* feedback */
  --c-ok: #2F6B45;
  --c-warn: #B0562F;
  --c-focus: #FF2E71;

  /* gradients */
  --grad-brand: linear-gradient(45deg, #FF803A, #FF2E71);
  /* Same hues, darkened so white text on it is >= 4.5:1 (WCAG AA): ends #CC4A14 (4.9:1) and #CC1B5E (5.4:1). */
  --grad-brand-text: linear-gradient(45deg, #CC4A14, #CC1B5E);
  --grad-brand-h: linear-gradient(90deg, #FF2E71, #FF803A);
  --grad-cover: linear-gradient(135deg, #F6E4DC, #EBCFC4);
  --grad-cover-recipe: linear-gradient(160deg, #FBEFE6, #F1DCCD);
  --grad-hero: linear-gradient(180deg, #FFF5F0, #FFFFFF);

  /* type */
  --font: 'zyalqmr', 'zyalqmr-fallback', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --fw-light: 200;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;

  /* radius */
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-2xl: 20px;
  --r-3xl: 22px;
  --r-modal: 26px;
  --r-pill: 999px;

  /* shadow */
  --shadow-page: 0 24px 60px rgba(39, 32, 29, .12);
  --shadow-modal: 0 30px 80px rgba(39, 32, 29, .35);
  --shadow-btn: 0 2px 6px rgba(39, 32, 29, .08);
  --shadow-bar: 0 -10px 30px rgba(39, 32, 29, .06);
  --shadow-knob: 0 1px 3px rgba(39, 32, 29, .25);
  --ring: 0 0 0 3px var(--c-focus);

  /* layout */
  --w-page: 1182px;
  --gutter: 40px;
  --header-h: 72px;
  --overlay: rgba(39, 32, 29, .46);
}

@media (max-width: 1023px) {
  :root { --gutter: 28px; }
}
@media (max-width: 639px) {
  :root { --gutter: 16px; --header-h: 64px; }
}