/*
  CookForMe design tokens. Source: Figma "Cook4Me (Copy)" 9cOLcouW2Kj5ARJclrU0Lq, page "Design System" (438:1393),
  values read with get_variable_defs (variables and text styles, not the hand-typed labels on that page, see DQ-018).
  The only place in the codebase with raw color / px values. Do not add tokens here without the owner (CLAUDE.md §3).
*/

@font-face {
  font-family: "Albert Sans";
  src: url("fonts/albert-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hahmlet";
  src: url("fonts/hahmlet-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color primitives (color/*) ---------- */
  --color-green-900: #0c310a;
  --color-green-900-a70: #0c310ab2;
  --color-green-900-a20: #0c310a33;
  --color-green-800: #134d21;
  --color-green-700: #1a6c2d;
  --color-green-700-a20: #1a6c2d33;
  --color-green-500: #488456;
  --color-green-500-a70: #488456b2;
  --color-green-400: #85b069;
  --color-lime-200: #d5e798;
  --color-lime-100: #e4eeb9;
  --color-cream-50: #fffdf6;
  --color-cream-100: #faf8ec;
  --color-neutral-400: #b9b9b9;
  --color-red-600: #d92d20;
  --color-red-100: #fee2e2;

  /* Stand-alone variable "bg" applied to the page frames */
  --bg: #faf8ec;

  /* ---------- Semantic: bg ---------- */
  --color-bg-page: var(--color-cream-100);
  --color-bg-surface: var(--color-cream-50);
  --color-bg-brand: var(--color-green-700);
  --color-bg-brand-subtle: var(--color-green-700-a20);
  --color-bg-accent: var(--color-lime-200);
  --color-bg-accent-subtle: var(--color-lime-100);
  --color-bg-media: var(--color-cream-100);
  --color-bg-error-subtle: var(--color-red-100);
  --color-bg-placeholder: var(--color-neutral-400);

  /* ---------- Semantic: text ---------- */
  --color-text-primary: var(--color-green-900);
  --color-text-heading: var(--color-green-800);
  --color-text-secondary: var(--color-green-900-a70);
  --color-text-brand: var(--color-green-700);
  --color-text-on-brand: var(--color-cream-50);
  --color-text-error: var(--color-red-600);

  /* ---------- Semantic: border ---------- */
  --color-border-subtle: var(--color-green-700-a20);
  --color-border-brand: var(--color-green-700);
  --color-border-strong: var(--color-green-900);
  --color-border-secondary: var(--color-green-900-a70);
  --color-border-divider: var(--color-green-900-a20);
  --color-border-accent: var(--color-green-400);
  --color-border-disabled: var(--color-neutral-400);
  --color-border-error: var(--color-red-600);
  --color-border-on-brand: var(--color-cream-50);

  /* ---------- Semantic: icon ---------- */
  --color-icon-primary: var(--color-green-900);
  --color-icon-secondary: var(--color-green-900-a70);
  --color-icon-brand: var(--color-green-700);
  --color-icon-accent: var(--color-green-500);
  --color-icon-accent-muted: var(--color-green-500-a70);
  --color-icon-step: var(--color-green-400);
  --color-icon-on-brand: var(--color-cream-50);
  --color-icon-error: var(--color-red-600);

  /* ---------- Spacing (space/*) ---------- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  /* ---------- Radius and borders ---------- */
  --radius-xs: 4px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --border-width-sm: 1px;
  --border-width-md: 2px;

  /* Shadows: the design system defines none. */

  /* ---------- Fonts ---------- */
  --font-sans: "Albert Sans", sans-serif;
  --font-serif: "Hahmlet", serif;
  /* Figma letter spacing -6% on display/brand, heading/h1, heading/h2 */
  --tracking-tight: -0.06em;

  /* ---------- Text styles: Mobile/* (applies 320–1023) ----------
     Usage: font: var(--type-heading-h1); plus letter-spacing: var(--tracking-tight) where the style has -6%.
     Mobile/display/overline → overline, Mobile/body/1 → body-xl (the Design System page pairs them). */
  --type-overline: 700 14px/20px var(--font-sans);
  --type-display-brand: 500 42px/56px var(--font-sans);
  --type-heading-h1: 500 26px/40px var(--font-serif);
  --type-heading-h2: 500 24px/38px var(--font-serif);
  --type-heading-h3: 600 14px/22px var(--font-sans);
  --type-price-lg: 700 42px/56px var(--font-sans);
  --type-price-sm: 500 28px/40px var(--font-sans);
  --type-body-xl: 400 16px/28px var(--font-sans);
  --type-body-xl-medium: 500 16px/28px var(--font-sans);
  --type-body-xl-strong: 600 18px/28px var(--font-sans);
  --type-body-lg: 400 16px/26px var(--font-sans);
  --type-body-lg-medium: 500 14px/24px var(--font-sans);
  --type-body-md: 400 16px/24px var(--font-sans);
  --type-body-md-medium: 500 16px/24px var(--font-sans);
  --type-body-sm: 400 14px/20px var(--font-sans);
  --type-label-lg: 600 16px/24px var(--font-sans);
  --type-label-md: 600 16px/24px var(--font-sans);
  --type-label-sm: 700 14px/20px var(--font-sans);

  /* ---------- Motion (owner-approved, CLAUDE.md §13) ---------- */
  --motion-fast: 200ms;
  --motion-base: 400ms;
  --motion-slow: 700ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-distance: 16px;
  --motion-stagger: 80ms;
}

/* ---------- Text styles: Desktop/* (1920 frame; base for every width ≥ 1024) ---------- */
@media (min-width: 1024px) {
  :root {
    --type-overline: 700 14px/20px var(--font-sans);
    --type-display-brand: 500 72px/80px var(--font-sans);
    --type-heading-h1: 500 52px/64px var(--font-serif);
    --type-heading-h2: 500 48px/64px var(--font-serif);
    --type-heading-h3: 600 24px/30px var(--font-sans);
    --type-price-lg: 700 60px/64px var(--font-sans);
    --type-price-sm: 500 32px/40px var(--font-sans);
    --type-body-xl: 400 20px/28px var(--font-sans);
    --type-body-xl-medium: 500 20px/28px var(--font-sans);
    --type-body-xl-strong: 600 20px/28px var(--font-sans);
    --type-body-lg: 400 18px/26px var(--font-sans);
    --type-body-lg-medium: 500 18px/28px var(--font-sans);
    --type-body-md: 400 16px/24px var(--font-sans);
    --type-body-md-medium: 500 16px/24px var(--font-sans);
    --type-body-sm: 400 14px/20px var(--font-sans);
    --type-label-lg: 600 18px/24px var(--font-sans);
    --type-label-md: 600 16px/24px var(--font-sans);
    --type-label-sm: 700 14px/20px var(--font-sans);

    /* Styles that only exist in the Desktop 1440 set ("lineHeight 100" in Figma = auto → normal) */
    --type-body-lead: 600 22px/30px var(--font-sans);
    --type-body-lead-medium: 500 22px/normal var(--font-sans);
    --type-body-base: 400 17px/24px var(--font-sans);
    --type-body-base-medium: 500 17px/24px var(--font-sans);
    --type-body-base-strong: 600 17px/24px var(--font-sans);
    --type-step-title: 600 17px/normal var(--font-sans);
    --type-step-text: 400 15px/normal var(--font-sans);
  }
}

/* ---------- Text styles: Desktop 1440/* where they differ from Desktop/* (1024–1919) ---------- */
@media (min-width: 1024px) and (max-width: 1919.98px) {
  :root {
    --type-heading-h1: 500 39px/58px var(--font-serif);
    --type-heading-h2: 500 37px/64px var(--font-serif);
  }
}

/* =====================================================================================
   Figma frame values that are not design-system tokens (logged in DQ-019).
   They are copied as-is from the page frames and component sets so that no component CSS
   holds a raw px value. Grouped by the component/section that uses them.
   ===================================================================================== */
:root {
  /* Page layout (Mobile 375 / Desktop 1440 / Desktop 1920 frames) */
  --layout-content-1440: 1280px;
  --layout-content-1920: 1645px;
  --layout-inset-width-1920: 1518px;
  --layout-faq-width-1920: 1521px;
  --layout-page-bottom-desktop: 134px;
  --layout-header-gap-desktop: 34px;
  --layout-section-head-gap-desktop: 60px;
  --layout-split-gap-desktop: 26px;
  --layout-split-card-padding-x: 60px;
  --layout-split-card-padding-y: 52px;

  /* Header */
  --header-height-mobile: 60px;
  --header-nav-height: 48px;
  --header-icon-button: 44px;
  /* decided by Claude (DQ-029): the Figma gaps (40px between links, 64px before "Free menu") at 1440 and up,
     shrinking with the viewport below 1440 so the desktop header stays on one line at 1024 */
  --header-links-gap: clamp(var(--space-4), 4vw - 17.6px, var(--space-10));
  --header-nav-gap: clamp(var(--space-6), 8vw - 51.2px, var(--space-16));

  /* UkraineBanner (owner, 2026-10-23; not in Figma): thin strip, smaller than the type scale */
  --ukraine-banner-type: 500 12px/16px var(--font-sans);
  --ukraine-banner-type-desktop: 500 14px/20px var(--font-sans);
  --ukraine-banner-height: 40px;
  --ukraine-banner-height-desktop: 48px; /* = the page's top padding, which the strip takes over */

  /* NavLink */
  --navlink-min-height: 44px;
  --navlink-small-padding-y: 10px;
  --navlink-menu-first-height: 56px;

  /* Benefit */
  --benefit-icon-width: 20px;
  --benefit-icon-height: 17px;
  --benefit-icon-width-desktop: 24px;
  --benefit-icon-height-desktop: 19.665px;
  --benefit-gap-desktop: 13px;
  --benefit-list-gap: 18px;
  --benefit-type-desktop: 400 20px/normal var(--font-sans);

  /* Primary / Secondary Button */
  --button-height: 50px;
  --button-cta-height-mobile: 52px;
  --button-type: 600 18px/normal var(--font-sans);
  --button-hover-opacity: 0.9;
  --button-loader-size: 18px;
  --button-loading-gap: 4px;
  --button-loading-min-height: 44px;
  --button-pricing-width-desktop: 257px;
  --button-pricing-line-height-desktop: 24px;
  --control-disabled-opacity: 0.6;

  /* Hero */
  /* Mobile photos keep the 375 frame's proportions (343x231) and scale with the width (owner, 2026-10-22) */
  --hero-image-ratio-mobile: 343 / 231;
  --hero-card-gap-desktop: 36px;
  --hero-height-1920: 551px;
  --hero-split-gap-1920: 3px;
  --hero-benefits-width-1920: 590px;
  --hero-benefit-last-width-1920: 546px;

  /* Pricing */
  --pricing-card-gap: 14px;
  --pricing-card-featured-border: 3px;
  --pricing-badge-offset-mobile: 17px;
  --pricing-badge-offset-desktop: 20px;
  --pricing-badge-width-mobile: 295px;
  --pricing-divider-width-desktop: 319px;
  --pricing-plan-width-desktop: 143px;
  --pricing-price-width-desktop: 205px;
  --pricing-cards-gap-1920: 62px;
  --pricing-heading-width-desktop: 956px;
  --pricing-subtitle-width-desktop: 726px;
  --pricing-plan-60-title-type: 600 20px/normal var(--font-sans);
  --pricing-plan-60-duration-type: 500 18px/normal var(--font-sans);
  --pricing-duration-type-desktop: 500 18px/normal var(--font-sans);
  --pricing-cards-top-1440: 17px;

  /* How it works */
  --how-heading-type-mobile: 500 28px/38px var(--font-serif);
  --how-subtitle-type-mobile: 500 20px/1.3 var(--font-sans);
  --how-step-title-type-mobile: 600 20px/normal var(--font-sans);
  --how-step-text-type-mobile: 400 16px/1.5 var(--font-sans);
  --how-heading-type-1920: 500 48px/65px var(--font-serif);
  --how-subtitle-type-1920: 500 24px/normal var(--font-sans);
  --how-step-title-type-1920: 600 20px/normal var(--font-sans);
  --how-step-text-type-1920: 400 16px/normal var(--font-sans);
  --how-step-text-width-1920: 240px;
  --how-icon-size-mobile: 88px;
  --how-icon-size-desktop: 120px;
  --how-grid-gap-x: 18px;
  --how-grid-offset-x: 12px;
  --how-grid-extra-width: 10px;
  --how-grid-offset-y: 9px;
  --how-grid-height-1440: 311px;
  --how-grid-height-1920: 260px;
  /* Arrow drawings: size, rotation, and where the drawing box is centred below the step top (measured on Figma's render) */
  --how-arrow-width-1440: 62.78px;
  --how-arrow-height-1440: 59.21px;
  --how-arrow-width-1920: 63.69px;
  --how-arrow-height-1920: 52.92px;
  --how-arrow-rotate: 29.77deg;
  --how-arrow-y-1440: 106px;
  --how-arrow-y-1920: 86px;

  /* For families (Card / Feature) */
  --families-needs-gap-mobile: 28px;
  --families-number-width: 30px;
  --families-number-height: 28px;
  --families-number-box-desktop: 50px;
  --families-photo-ratio-mobile: 343 / 230;
  --families-photo-height-1440: 624px;
  --families-photo-height-1920: 542px;

  /* Reviews (Card / Review) */
  --review-text-type-mobile: 400 14px/1.5 var(--font-sans);
  --review-text-type-desktop: 400 16px/normal var(--font-sans);
  --review-name-type: 500 24px/normal var(--font-sans);
  --review-avatar-size: 45px;
  --review-quote-width: 56px;
  --review-quote-height: 44.085px;
  --review-featured-zoom: 1.3;
  --reviews-columns-1440: 380fr 20fr 480fr 20fr 380fr;
  --reviews-columns-1920: 493fr 15fr 629fr 16fr 492fr;
  --reviews-side-height-1440: 324px;

  /* Founder and trust */
  --founder-photo-height-mobile: 325px;
  --founder-photo-height-1440: 790px;
  --founder-photo-height-1920: 818px;
  --founder-card-gap-mobile: 28px;
  --founder-heading-type-1440: 500 37px/54px var(--font-serif);
  --founder-heading-width-1920: 685px;
  --trust-arrow-width: 94.58px;
  --trust-arrow-height: 102.44px;
  --trust-width-desktop: 768px;

  /* FAQ Item / Accordion indicator */
  --faq-expanded-gap: 14px;
  --faq-toggle-size: 44px;
  --faq-indicator-size: 32px;
  --faq-indicator-plus-offset: 4px;
  --faq-indicator-minus-top: 13.05px;

  /* Footer */
  --footer-social-gap: 13px;
  --footer-social-min-height: 51px;
  --footer-brand-min-width: 240px; /* decided by Claude (DQ-024): below it the footer wraps */
  --footer-padding-top-desktop: 56px;
  --footer-padding-x-desktop: 60px;
  --footer-columns-1920: 420px 220px 220px 540px;

  /* Option Card / Option Card / Tile / Text Input / Progress Bar (Form Component States 365:485) */
  --option-indicator-size: 20px;
  --option-checkbox-radius: 6px;
  --option-check-size: 12px;
  --option-label-type: 400 16px/normal var(--font-sans);
  --option-label-type-selected: 600 16px/normal var(--font-sans);
  --option-min-height: 52px;
  --option-tile-width: 89px;
  --input-label-type: 600 16px/normal var(--font-sans);
  --input-type: 400 16px/normal var(--font-sans);
  --input-error-type: 400 14px/normal var(--font-sans);
  --input-multiline-height: 90px;
  --progress-height: 8px;

  /* Form section shell (A few details about your family) */
  --form-section-subtitle-type-desktop: 500 24px/normal var(--font-sans);
  --form-section-heading-type-1920: 500 48px/65px var(--font-serif);
  --form-section-gap-1920: 94px;
  --form-section-left-width-1440: 560px;
  --form-section-left-width-1920: 679px;
  --form-section-heading-width-1920: 649px;
  --form-container-width-1440: 672px;
  --form-container-width-1920: 745px;

  /* Form Container (418:6358, 438:3120, 393:782) */
  --form-meta-strong-type: 700 14px/normal var(--font-sans);
  --form-meta-type: 400 14px/normal var(--font-sans);
  --form-question-type-desktop: 600 24px/normal var(--font-sans);
  --form-helper-type: 400 16px/normal var(--font-sans);
  --form-error-type: 400 14px/normal var(--font-sans);
  --form-helper-icon: 18px;
  --form-badge-size: 32px;
  --form-badge-radius: 16px;
  --form-title-type: 600 24px/normal var(--font-sans);
  --form-summary-type: 400 16px/normal var(--font-sans);
  --form-summary-value-type: 600 16px/normal var(--font-sans);
  --form-summary-label-width: 75px;
  --form-summary-column-gap: 74px;
}