/* EKA-YOGA design tokens v4. Generated from design/ds/tokens.json.
   Scale rule: everything is a CSS variable. Mobile (<768px) overrides the
   heading + text sizes; colours, radius and families stay. */

:root {
  /* ---------- Colour ---------- */
  --brand-red: #AF5D65;
  --brand-red-light: #C3737B;
  --brand-green: #5D7054;

  --bg-page: #F3F0E4;
  --bg-card: #FFFFFF;
  --bg-content-primary: #F3F0E4;
  --bg-content-secondary: #E3E7DC;
  --bg-footer: #5D7054;
  --bg-menu: rgba(93, 112, 84, 0.5);

  --border-control: #5D7054;
  --border-stroke: #AF5D65;

  --text-main: #5D7054;
  --text-muted: rgba(93, 112, 84, 0.8);
  --text-error: #B42318;

  --state-disabled: #AAAAAA;
  --notify-red: #EB0027;

  --product-red: #AE2958;
  --product-yellow: #D7B955;
  --product-green: #819886;
  --product-blue: #518398;

  /* Only two documented gradients in the whole system. */
  --scrim-header: linear-gradient(180deg, rgba(93, 112, 84, 0.8) 22%, rgba(93, 112, 84, 0) 100%);
  --thumb-gradient: linear-gradient(180deg, rgba(93, 112, 84, 0) 37%, rgba(93, 112, 84, 0.8) 100%);

  /* ---------- Type families ---------- */
  --font-serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-sans: Lato, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale v4 — desktop ---------- */
  --fs-h1: 56px;
  --fs-h2: 48px;
  --fs-h3: 40px;
  --fs-h4: 32px;
  --fs-h5: 24px;
  --fs-h6: 20px;

  --fs-text-large: 20px;
  --fs-text-medium: 18px;
  --fs-text-regular: 16px;
  --fs-text-small: 14px;

  --lh-heading: 1;
  --lh-text: 1.5;

  /* ---------- Radius ---------- */
  --radius-control: 8px;
  --radius-badge: 4px;

  /* ---------- Layout ---------- */
  --page-max: 1440px;
  --side-padding-desktop: 64px;
  --side-padding-mobile: 16px;
}

/* Mobile type scale (<768px) — only font sizes change. */
@media (max-width: 767px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 40px;
    --fs-h3: 32px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 18px;

    --fs-text-large: 18px;
    --fs-text-medium: 16px;
    --fs-text-regular: 14px;
    --fs-text-small: 12px;
  }
}