/* ==========================================================================
   Design tokens
   The ONLY file where raw values (hex colors, rem sizes) are allowed.

   Source: Figma file "Burger Beast Microsite", variable collections
     01 Primitives  -> Primitive color tokens
     02 Semantic    -> Semantic color tokens (reference primitives)
     03 Typography  -> Typography tokens (Desktop mode on :root,
                       Mobile mode in the media query at the bottom)

   Naming: Figma "Group/name" becomes "--color-name" for colors and
   "--group-property" for typography. Sizes are converted from px to rem
   (16px = 1rem) so text respects the visitor's browser font size; the
   original px value is noted in a comment.

   Components and layouts use semantic and typography tokens only.
   ========================================================================== */

:root {
  /* ======================================================================
     01 Primitives (Figma) – raw colors
     ====================================================================== */

  /* Base */
  --color-white-500: #ffffff;
  --color-white-300: #ffffffcc;
  --color-white-200: #ffffff99;
  --color-gray-100: #e8e6e6;
  --color-gray-300: #c7c7c7;
  --color-gray-500: #757575;
  --color-black-500: #010101;

  /* Red Orange */
  --color-red-orange-100: #fdbdb3;
  --color-red-orange-300: #fa9b8c;
  --color-red-orange-500: #fe3b1f;
  --color-red-orange-700: #a52814;
  --color-red-orange-900: #53140a;

  /* Purple */
  --color-purple-050: #e8d8fc;
  --color-purple-100: #ccb4e9;
  --color-purple-300: #ab8bd3;
  --color-purple-500: #773dbd;
  --color-purple-700: #31006f;
  --color-purple-900: #1f1646;

  /* Deep Purple */
  --color-deep-purple-100: #bca6db;
  --color-deep-purple-300: #957cb7;
  --color-deep-purple-500: #6a4b93;
  --color-deep-purple-700: #31036f;
  --color-deep-purple-900: #180238;

  /* Orange */
  --color-orange-100: #fecdaa;
  --color-orange-300: #feb47f;
  --color-orange-500: #ff6b00;
  --color-orange-700: #a94701;
  --color-orange-900: #542400;

  /* Yellow */
  --color-yellow-500: #f9d700;

  /* Provider (delivery partner brand colors) */
  --color-green-500: #00b14f;
  --color-pink-500: #f0047f;
  --color-orange-shopeefood-500: #ee4d2d;

  /* ======================================================================
     02 Semantic (Figma) – colors by purpose, referencing primitives
     ====================================================================== */

  /* Background */
  --color-background-primary: var(--color-white-500);
  --color-background-primary-dark: var(--color-black-500);
  --color-background-secondary: var(--color-gray-100);
  --color-background-brand: var(--color-purple-500);
  --color-background-brand-light: var(--color-purple-100);
  --color-background-brand-extralight: var(--color-purple-050);
  --color-background-brand-dark: var(--color-purple-900);
  --color-background-accent: var(--color-red-orange-500);
  --color-background-accent-light: var(--color-red-orange-100);
  --color-background-accent-dark: var(--color-red-orange-900);
  --color-background-ratings: var(--color-yellow-500);
  /* Figma: black-500 at 40% opacity */
  --color-background-overlay: color-mix(in srgb, var(--color-black-500) 40%, transparent);
  --color-background-grab: var(--color-green-500);
  --color-background-foodpanda: var(--color-pink-500);
  --color-background-shopeefood: var(--color-orange-shopeefood-500);

  /* Button – primary */
  --color-button-fill-primary: var(--color-red-orange-500);
  --color-button-border-primary: var(--color-red-orange-500);
  --color-button-text-primary: var(--color-white-500);
  --color-button-fill-primary-hover: var(--color-red-orange-700);
  --color-button-border-primary-hover: var(--color-red-orange-700);
  --color-button-fill-primary-disabled: var(--color-gray-300);
  --color-button-border-primary-disabled: var(--color-gray-300);
  --color-button-text-primary-disabled: var(--color-white-500);

  /* Button – secondary */
  /* Figma: purple-500 at 0% opacity (transparent) */
  --color-button-fill-secondary: color-mix(in srgb, var(--color-purple-500) 0%, transparent);
  --color-button-border-secondary: var(--color-purple-500);
  --color-button-text-secondary: var(--color-purple-700);
  --color-button-fill-secondary-hover: var(--color-purple-700);
  --color-button-border-secondary-hover: var(--color-purple-700);
  --color-button-text-secondary-hover: var(--color-white-500);
  --color-button-fill-secondary-disabled: var(--color-gray-300);
  --color-button-border-secondary-disabled: var(--color-gray-300);
  --color-button-text-secondary-disabled: var(--color-gray-500);

  /* Button – secondary light (for dark backgrounds) */
  --color-button-border-secondary-light: var(--color-white-500);
  --color-button-text-secondary-light: var(--color-white-500);
  --color-button-fill-secondary-light-hover: var(--color-white-500);
  --color-button-text-secondary-light-hover: var(--color-purple-500);

  /* Text */
  --color-text-primary: var(--color-deep-purple-900);
  /* Figma: deep-purple-900 at 60% opacity */
  --color-text-primary-subtle: color-mix(in srgb, var(--color-deep-purple-900) 60%, transparent);
  --color-text-primary-light: var(--color-white-500);
  --color-text-primary-light-subtle: var(--color-white-300);
  --color-text-primary-light-faded: var(--color-white-200);
  --color-text-secondary: var(--color-gray-500);
  --color-text-black: var(--color-black-500);
  --color-text-accent-orange: var(--color-red-orange-500);
  --color-text-accent-purple: var(--color-purple-500);
  --color-text-accent-purple-light: var(--color-purple-100);

  /* Border */
  --color-border-primary: var(--color-gray-300);

  /* Added for the website (not in Figma): keyboard focus outline and links */
  --color-focus-ring: var(--color-purple-500);
  --color-focus-ring-light: var(--color-white-500); /* on dark backgrounds */
  --color-link: var(--color-purple-500);
  --color-link-hover: var(--color-purple-700);

  /* ======================================================================
     03 Typography (Figma) – Desktop mode
     Mobile mode overrides are in the media query at the bottom.
     ====================================================================== */

  /* Font families – self-hosted in /assets/fonts (see @font-face in typography.css).
     Sharpie only has one style (Black), so every Sharpie weight renders Black, as in Figma. */
  --font-family-sharpie: "Sharpie", "Arial Black", sans-serif;
  --font-family-dm-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* not in Figma: code samples */

  --h1-font-family: var(--font-family-sharpie);
  --h1-font-weight: 700;
  --h1-font-size: 5.125rem;   /* 82px */
  --h1-line-height: 5.125rem; /* 82px */
  --h1-letter-spacing: 0;

  --h2-font-family: var(--font-family-sharpie);
  --h2-font-weight: 700;
  --h2-font-size: 4rem;   /* 64px */
  --h2-line-height: 4rem; /* 64px */
  --h2-letter-spacing: 0;

  --h3-font-family: var(--font-family-sharpie);
  --h3-font-weight: 400;
  --h3-font-size: 2.5rem;   /* 40px */
  --h3-line-height: 3.5rem; /* 56px */
  --h3-letter-spacing: 0;

  --h4-font-family: var(--font-family-dm-sans);
  --h4-font-weight: 400;
  --h4-font-size: 2.25rem; /* 36px */
  --h4-line-height: 3rem;  /* 48px */
  --h4-letter-spacing: 0;

  --h5-font-family: var(--font-family-dm-sans);
  --h5-font-weight: 700;
  --h5-font-size: 2.5rem;    /* 40px */
  --h5-line-height: 2.75rem; /* 44px */
  --h5-letter-spacing: 0;

  --h6-font-family: var(--font-family-dm-sans);
  --h6-font-weight: 500;
  --h6-font-size: 1.625rem; /* 26px */
  --h6-line-height: 2.25rem; /* 36px */
  --h6-letter-spacing: 0;

  --paragraph-font-family: var(--font-family-dm-sans);
  --paragraph-font-weight: 400;
  --paragraph-font-size: 1rem;      /* 16px */
  --paragraph-line-height: 1.375rem; /* 22px */
  --paragraph-letter-spacing: 0;

  --body-xl-font-family: var(--font-family-dm-sans);
  --body-xl-font-weight: 600;
  --body-xl-font-size: 1.5rem; /* 24px */
  --body-xl-line-height: 2rem; /* 32px */
  --body-xl-letter-spacing: 0;

  --body-l-font-family: var(--font-family-dm-sans);
  --body-l-font-weight: 600;
  --body-l-font-size: 1.125rem; /* 18px */
  --body-l-line-height: 1.5rem; /* 24px */
  --body-l-letter-spacing: 0;

  --body-m-font-family: var(--font-family-dm-sans);
  --body-m-font-weight: 600;
  --body-m-font-size: 1rem;       /* 16px */
  --body-m-line-height: 1.125rem; /* 18px */
  --body-m-letter-spacing: 0;

  --body-s-font-family: var(--font-family-dm-sans);
  --body-s-font-weight: 500;
  --body-s-font-size: 0.875rem;   /* 14px */
  --body-s-line-height: 1.375rem; /* 22px */
  --body-s-letter-spacing: 0;

  --body-xs-font-family: var(--font-family-dm-sans);
  --body-xs-font-weight: 400;
  --body-xs-font-size: 0.75rem; /* 12px */
  --body-xs-line-height: 1rem;  /* 16px */
  --body-xs-letter-spacing: 0;

  --nav-menu-font-family: var(--font-family-dm-sans);
  --nav-menu-font-weight: 600;
  --nav-menu-font-size: 1.125rem; /* 18px */
  --nav-menu-line-height: 1.5rem; /* 24px */
  --nav-menu-letter-spacing: 0;

  --button-l-font-family: var(--font-family-dm-sans);
  --button-l-font-weight: 700;
  --button-l-font-size: 1.125rem;   /* 18px */
  --button-l-line-height: 1.375rem; /* 22px */
  --button-l-letter-spacing: 0;

  --button-m-font-family: var(--font-family-dm-sans);
  --button-m-font-weight: 700;
  --button-m-font-size: 1rem;       /* 16px */
  --button-m-line-height: 1.375rem; /* 22px */
  --button-m-letter-spacing: 0;

  --accent-font-family: var(--font-family-dm-sans);
  --accent-font-weight: 600;
  --accent-font-size: 1.25rem;        /* 20px */
  --accent-line-height: 2rem;         /* 32px */
  --accent-letter-spacing: 0.0625rem; /* 1px */

  --footer-menu-font-family: var(--font-family-dm-sans);
  --footer-menu-font-weight: 600;
  --footer-menu-font-size: 1.625rem;  /* 26px */
  --footer-menu-line-height: 2.25rem; /* 36px */
  --footer-menu-letter-spacing: 0;

  --testimonial-font-family: var(--font-family-dm-sans);
  --testimonial-font-weight: 600;
  --testimonial-font-size: 1.5rem;    /* 24px */
  --testimonial-line-height: 1.75rem; /* 28px */
  --testimonial-letter-spacing: 0;

  /* ======================================================================
     Not in Figma yet – placeholders for spacing, radius, shadow, layout.
     Replace when these are defined in Figma.
     ====================================================================== */

  /* Primitive: spacing (4px base scale) */
  --space-0-5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem;   /* 48px */
  --space-14: 3.5rem; /* 56px */
  --space-16: 4rem;   /* 64px */
  --space-20: 5rem;   /* 80px */
  --space-30: 7.5rem; /* 120px */
  --space-19-5: 4.875rem; /* 78px – off-scale, from the Figma nav bar */

  /* Primitive: radius, shadow, sizes */
  --radius-2: 0.25rem;
  --radius-4: 0.5rem;
  --radius-12: 1.5rem; /* 24px */
  --radius-full: 9999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.12);
  --shadow-glow-yellow: 0 2px 50px rgb(255 247 189 / 0.22); /* from Figma's testimonial card (colour not in the palette) */
  --size-container-max: 75rem; /* 1200px */
  --size-border-thin: 1px;
  --size-focus-ring: 3px;
  --size-10: 2.5rem; /* 40px */
  --size-18: 4.5rem; /* 72px */
  --size-20: 5rem;   /* 80px */
  --size-15: 3.75rem;        /* 60px */
  --size-footer-logo: 4.3125rem; /* 69px */
  --size-footer-brand: 25rem;    /* 400px */
  --size-container-wide: 80rem;  /* 1280px */
  --size-2: 0.5rem;              /* 8px */
  --size-4: 1rem;                /* 16px */
  --size-6: 1.5rem;              /* 24px */
  --size-12: 3rem;               /* 48px */
  --size-14: 3.5rem;             /* 56px */
  --size-dish-image: 20rem;      /* 320px */
  --size-card-max: 36rem;        /* 576px: max width of single-column cards on tablets */
  --size-hero-content: 33.75rem; /* 540px */
  --size-eyes-left-width: 16.1786rem;  /* 258.857px */
  --size-eyes-left-height: 5.7562rem;  /* 92.099px */
  --size-eyes-right-width: 23.1923rem; /* 371.076px */
  --size-eyes-right-height: 8.2516rem; /* 132.025px */
  --size-404-content: 31.25rem;        /* 500px */
  --size-page-header-intro: 35.0625rem; /* 561px */
  --size-menu-dish-min: 37.5rem;       /* 600px: below this a horizontal dish card gets too cramped */
  --size-menu-providers-text: 39.375rem; /* 630px */
  --size-branch-row: 26.25rem;         /* 420px */
  --size-404-eyes: 23.75rem;           /* 380px square */
  --size-404-eyes-mobile-width: 11.0625rem;  /* 177px */
  --size-404-eyes-mobile-height: 6.3125rem;  /* 101px */
  --gradient-stop-dish-fade: 25.593%; /* from Figma's dish photo gradient */
  --size-article-image: 23.125rem;       /* 370px */
  --size-article-image-mobile: 18.75rem; /* 300px */
  --size-split-media-min: 12.5rem;       /* 200px */
  --size-split-content: 45rem;           /* 720px */
  --size-article-progress: 6.25rem;      /* 100px */
  --size-article-progress-bar: 0.375rem; /* 6px */
  --size-swatch-chip: 4.5rem;  /* 72px */
  --size-swatch-min: 13.75rem; /* 220px */
  --size-card-min: 22rem;      /* 352px */

  /* Semantic: spacing */
  --spacing-inline-sm: var(--space-2);
  --spacing-inline-md: var(--space-4);
  --spacing-stack-sm: var(--space-2);
  --spacing-stack-md: var(--space-4);
  --spacing-stack-lg: var(--space-8);
  --spacing-section: var(--space-16);
  --spacing-page-gutter: var(--space-5); /* 20px, from Figma mobile frames */
  --spacing-offset: var(--space-4);
  --spacing-offscreen: calc(-1 * var(--space-16));

  /* Semantic: button (from the Figma Button component) */
  --spacing-button-l-y: var(--space-4); /* 16px */
  --spacing-button-l-x: var(--space-6); /* 24px */
  --spacing-button-m-y: var(--space-3); /* 12px */
  --spacing-button-m-x: var(--space-4); /* 16px */
  --radius-button: var(--radius-4);     /* 8px */
  --border-width-button: var(--size-border-thin);

  /* Semantic: navigation bar (from the Figma Navigation Bar component) */
  --nav-bar-padding-y: var(--space-4);          /* desktop: 16px */
  --nav-bar-padding-y-mobile: var(--space-2);   /* tablet/mobile: 8px */
  --nav-links-gap: var(--space-19-5);           /* 78px */
  --nav-logo-height: var(--size-20);            /* 80px */
  --nav-logo-height-mobile: var(--size-18);     /* 72px */
  --nav-toggle-size: var(--size-10);            /* 40px */
  --nav-menu-padding: var(--space-5);           /* 20px */
  --nav-menu-gap: var(--space-2);               /* 8px */
  --nav-item-height: var(--size-20);            /* 80px */
  --nav-menu-duration: 300ms;                   /* tablet/mobile menu open/close */
  --nav-menu-easing: cubic-bezier(0.2, 0, 0, 1); /* quick start, gentle finish */

  /* Semantic: footer (from the Figma Footer component) */
  --footer-padding: var(--space-20);            /* desktop: 80px all round */
  --footer-padding-y-mobile: var(--space-10);   /* tablet/mobile: 40px top and bottom */
  --footer-content-max: var(--size-container-wide); /* 1440px frame minus 2 x 80px */
  --footer-brand-width: var(--size-footer-brand);   /* 400px */
  --footer-brand-gap: var(--space-6);           /* 24px: logo to text */
  --footer-column-gap: var(--space-4);          /* 16px: heading to links */
  --footer-stack-gap: var(--space-10);          /* tablet/mobile: 40px between groups */
  --footer-logo-height: var(--size-footer-logo);
  --footer-social-gap: var(--space-6);          /* 24px */
  --footer-social-size: var(--size-15);         /* 60px circle */
  --radius-pill: var(--radius-full);

  /* Semantic: article excerpt slider (from the Figma Article Excerpt Carousel) */
  --article-max-width: var(--size-container-wide);       /* 1280px */
  --article-radius: var(--radius-12);                     /* 24px */
  --article-image-width: var(--size-article-image);      /* desktop: 370px */
  --article-image-height-mobile: var(--size-article-image-mobile); /* tablet/mobile: 300px */
  --article-card-padding: var(--space-14);               /* desktop: 56px */
  --article-card-padding-mobile: var(--space-8);         /* tablet/mobile: 32px */
  --article-card-gap: var(--space-8);                    /* desktop: 32px */
  --article-card-gap-mobile: var(--space-5);             /* tablet/mobile: 20px */
  --article-excerpt-gap: var(--space-2);                 /* 8px: quote to source */
  --article-progress-width: var(--size-article-progress);   /* desktop: 100px per bar */
  --article-progress-height: var(--size-article-progress-bar); /* 6px bar */
  --article-progress-gap: var(--space-2);                  /* 8px between bars */
  --article-progress-hit-height: var(--size-6);            /* 24px clickable height */
  --article-fade-duration: 400ms;

  /* Semantic: providers badge (from the Figma Providers Badge component) */
  --badge-gap: var(--space-4);                  /* 16px: logos to text */
  --badge-padding-y: var(--space-2);            /* compact: 8px */
  --badge-padding-start: var(--space-2);        /* compact: 8px left */
  --badge-padding-end: var(--space-4);          /* compact: 16px right */
  --badge-padding-full: var(--space-4);         /* full width: 16px all round */
  --badge-padding-extra: var(--space-0-5);      /* all compact badges: 2px more on every side than Figma */
  --badge-radius: var(--radius-4);              /* 8px */
  --badge-logos-gap: var(--space-2);            /* 8px between logo tiles */
  --badge-text-gap: var(--space-1);             /* 4px: "Available in" to names */
  --badge-tile-size: var(--size-12);            /* compact: 48px tiles */
  --badge-tile-size-full: var(--size-14);       /* full width: 56px tiles */
  --badge-tile-radius: var(--radius-4);         /* 8px */
  --badge-tile-radius-five-neo: var(--radius-2); /* 4px */
  --badge-tile-inset: var(--space-1);           /* 4px side padding around the ShopeeFood logo */

  /* Semantic: dish card (from the Figma Dish Card component) */
  --dish-card-radius: var(--radius-12);         /* 24px */
  --dish-card-padding: var(--space-6);          /* 24px */
  --dish-card-gap: var(--space-2);              /* 8px: name to description */
  --dish-card-image-size: var(--size-dish-image); /* horizontal: 320px square photo */
  --dish-card-fade-height: var(--gradient-stop-dish-fade); /* red fade at the bottom of the photo */

  /* Semantic: testimonial card (from the Figma Testimonial Card component) */
  --testimonial-card-padding: var(--space-8);   /* 32px */
  --testimonial-card-gap: var(--space-4);       /* 16px: rating to quote */
  --testimonial-card-radius: var(--radius-12);  /* 24px */
  --testimonial-card-shadow: var(--shadow-glow-yellow);
  --testimonial-rating-gap: var(--space-3);     /* 12px: stars to "5/5" */
  --testimonial-stars-gap: var(--space-2);      /* 8px between stars */
  --testimonial-star-size: var(--size-6);       /* 24px */
  --testimonial-content-gap: var(--space-2);    /* 8px: quote to full review */

  /* Semantic: section head (centred eyebrow + title, from the Home page) */
  --section-head-gap: var(--space-3);           /* 12px */

  /* Semantic: split feature (photo + text panel: Awards and Story sections) */
  --split-media-ratio: 53fr;                    /* 636px of 1440 */
  --split-panel-ratio: 67fr;                    /* 804px of 1440 */
  --split-panel-padding-y: clamp(var(--space-10), 5.556vw, var(--space-20));  /* 40px mobile → 80px desktop */
  --split-panel-padding-x: clamp(var(--spacing-page-gutter), 9.524vw - 1.0714rem, var(--space-30)); /* 20px at 390px wide → 120px at 1440px */
  --split-content-max-width: var(--size-split-content); /* 720px: keeps lines readable on wide screens */
  --split-panel-gap: var(--space-12);           /* desktop: 48px */
  --split-panel-gap-mobile: var(--space-10);    /* tablet/mobile: 40px */
  --split-text-gap: var(--space-5);             /* 20px: title to body */
  --split-media-height-mobile: clamp(var(--size-split-media-min), 40vw, 22.5rem); /* 200px on phones, taller on tablets */

  /* Semantic: award (logo tile + award name, from the Home page) */
  --award-gap: var(--space-3);                  /* 12px: tile to text */
  --award-list-gap: var(--space-5);             /* 20px between awards */
  --award-tile-size: var(--size-18);            /* desktop: 72px */
  --award-tile-size-mobile: var(--size-10);     /* tablet/mobile: 40px */
  --award-foodpanda-logo-height: 41.66%;        /* Figma: logo is 41.66% of the tile tall */

  /* Semantic: Home page layout */
  --section-padding-y: clamp(var(--space-10), 5.556vw, var(--space-20)); /* 40px mobile → 80px desktop */
  --section-gap: var(--space-10);               /* 40px between blocks in a section */
  --layout-container-wide-max: var(--size-container-wide); /* 1280px (Love for Burger Beast section) */
  --layout-card-max: var(--size-card-max);
  --grid-gap: var(--space-5);                   /* 20px between cards */
  --home-hero-content-width: var(--size-hero-content);
  --home-hero-gap: clamp(var(--space-10), 4.444vw, var(--space-16)); /* 40px mobile → 64px desktop */
  --home-hero-text-gap: var(--space-5);         /* 20px */
  --home-hero-badges-gap: var(--space-2);       /* 8px */
  /* Figma crops the hero photo: 83.72% wide, 27.19% from the left, 93.11% above the top */
  --home-hero-image-width: 83.72%;
  --home-hero-image-left: 27.19%;
  --home-hero-image-top: -93.11%;
  --home-hero-overlay: linear-gradient(90.056deg, var(--color-background-brand-dark) 26.261%, color-mix(in srgb, var(--color-background-brand-dark) 60%, transparent) 61.557%);
  --home-hero-overlay-mobile: linear-gradient(179.8deg, var(--color-background-brand-dark) 0.125%, color-mix(in srgb, var(--color-background-brand-dark) 60%, transparent) 53.117%);
  --home-featured-bg-opacity: 0.5;
  /* Decorative beast eyes: centred on Figma's positions, measured from the middle of the page */
  --home-eyes-left-width: var(--size-eyes-left-width);
  --home-eyes-left-height: var(--size-eyes-left-height);
  --home-eyes-left-x: -40.746rem;               /* left edge: 651.93px left of centre */
  --home-eyes-left-y: 8.632rem;                 /* 138.11px from the section top */
  --home-eyes-left-rotate: 10.16deg;
  --home-eyes-right-width: var(--size-eyes-right-width);
  --home-eyes-right-height: var(--size-eyes-right-height);
  --home-eyes-right-x: 21.16rem;                /* left edge: 338.56px right of centre */
  --home-eyes-right-y: 4.74rem;                 /* 75.84px from the section top */
  --home-eyes-right-rotate: -14.32deg;

  /* Semantic: page header (title + intro + badge on a textured banner) */
  --page-header-padding-y: var(--section-padding-y);   /* 40px mobile → 80px desktop */
  --page-header-gap: var(--space-16);                  /* desktop: 64px between text and badge */
  --page-header-gap-mobile: var(--space-10);           /* tablet/mobile: 40px */
  --page-header-text-gap: var(--space-4);              /* 16px: title to intro */
  --page-header-intro-width: var(--size-page-header-intro);
  --page-header-overlay: color-mix(in srgb, var(--color-black-500) 60%, transparent); /* 60% black over the background (darker than Figma's ~16%, by request) */

  /* Semantic: branch row (photo + branch name, address and maps link) */
  --branch-min-height: var(--size-branch-row);                                   /* desktop: 420px */
  --branch-padding-y: clamp(var(--space-10), 3.81vw + 1.571rem, var(--space-20)); /* 40px at 390px wide → 80px at 1440px */
  --branch-padding-x: clamp(var(--spacing-page-gutter), 5.714vw - 0.143rem, var(--space-20)); /* 20px → 80px */
  --branch-gap: var(--space-12);                                                 /* 48px: text to button */
  --branch-text-gap: var(--space-4);                                             /* 16px: name to address */
  --branch-media-height-mobile: var(--split-media-height-mobile);                /* 200px on phones, taller on tablets */

  /* Semantic: Menu page layout */
  --menu-dish-min-width: var(--size-menu-dish-min);
  --menu-dishes-gap: clamp(var(--space-10), 3.81vw + 1.571rem, var(--space-20)); /* 40px → 80px: dishes to providers banner */
  --menu-dishes-padding-bottom: var(--space-10);       /* 40px */
  --menu-providers-padding: clamp(var(--space-6), 0.762vw + 1.314rem, var(--space-8)); /* 24px at 390px wide → 32px at 1440px */
  --menu-providers-radius: var(--radius-12);           /* 24px */
  --menu-providers-shadow: var(--shadow-glow-yellow);
  --menu-providers-gap: var(--space-6);                /* tablet/mobile: 24px from text to badges */
  --menu-providers-text-width: var(--size-menu-providers-text); /* 630px */
  --menu-providers-title-gap: var(--space-4);          /* 16px: eyebrow to title */
  --menu-strip-padding-top: clamp(var(--space-5), 1.905vw + 0.786rem, var(--space-10));   /* 20px → 40px */
  --menu-strip-padding-bottom: clamp(var(--space-10), 3.81vw + 1.571rem, var(--space-20)); /* 40px at 390px wide → 80px at 1440px */

  /* Semantic: 404 page layout */
  --page-404-padding-y: clamp(var(--space-10), 7.619vw + 0.643rem, var(--space-30)); /* 40px at 390px wide → 120px at 1440px */
  --page-404-content-width: var(--size-404-content);
  --page-404-content-gap: var(--space-5);       /* 20px between title block, message and button */
  --page-404-title-gap: var(--space-4);         /* 16px: "404 | Page not found" to title */
  --page-404-stack-gap: var(--space-12);        /* tablet/mobile: 48px from eyes to text */
  --page-404-overlay: color-mix(in srgb, var(--color-black-500) 60%, transparent); /* 60% black over the swirl (darker than Figma's ~16%, by request) */
  --page-404-eyes-size: var(--size-404-eyes);
  --page-404-eyes-width-mobile: var(--size-404-eyes-mobile-width);
  --page-404-eyes-height-mobile: var(--size-404-eyes-mobile-height);

  /* Semantic: Partnerships page layout */
  --partnerships-gap-mobile: var(--space-6);    /* tablet/mobile: 24px between text block and button */
  --partnerships-media-ratio-mobile: 636 / 510; /* tablet/mobile: Figma photo proportions, full width */
  --partnerships-link-hover-text: var(--color-button-fill-primary-hover); /* email link hover: red-orange-700, same as the primary button hover */

  /* Semantic: radius, shadow, layout */
  --radius-control: var(--radius-2);
  --radius-card: var(--radius-4);
  --shadow-card: var(--shadow-1);
  --shadow-raised: var(--shadow-2);
  --layout-container-max: var(--size-container-max);
  --border-default: var(--size-border-thin) solid var(--color-border-primary);
  --focus-ring-width: var(--size-focus-ring);
  --visually-hidden-size: var(--size-border-thin); /* screen-reader-only text box */

  /* Semantic: style guide page */
  --styleguide-swatch-height: var(--size-swatch-chip);
  --styleguide-swatch-min-width: var(--size-swatch-min);
  --styleguide-card-min-width: var(--size-card-min);
  --code-font-family: var(--font-family-mono);
}

/* ==========================================================================
   03 Typography (Figma) – Mobile mode
   Only values that differ from Desktop are listed.
   Breakpoint 48rem (768px) matches the rest of the site.
   ========================================================================== */
@media (max-width: 48rem) {
  :root {
    --h1-font-size: 2.875rem;   /* 46px */
    --h1-line-height: 2.875rem; /* 46px */

    --h2-font-size: 2rem;   /* 32px */
    --h2-line-height: 2rem; /* 32px */

    --h3-font-size: 1.75rem;   /* 28px */
    --h3-line-height: 2.25rem; /* 36px */

    --h4-font-size: 1.5rem; /* 24px */
    --h4-line-height: 2rem; /* 32px */

    --h5-font-size: 1.5rem;    /* 24px */
    --h5-line-height: 1.75rem; /* 28px */

    --h6-font-size: 1.25rem;   /* 20px */
    --h6-line-height: 1.75rem; /* 28px */

    --body-xl-font-size: 1.125rem;   /* 18px */
    --body-xl-line-height: 1.625rem; /* 26px */

    --body-l-font-size: 1rem; /* 16px */

    --nav-menu-line-height: 1.375rem; /* 22px */

    --button-m-font-size: 0.875rem;   /* 14px */
    --button-m-line-height: 1.125rem; /* 18px */

    --accent-font-size: 0.875rem;      /* 14px */
    --accent-line-height: 1.125rem;    /* 18px */
    --accent-letter-spacing: 0.005rem; /* 0.08px */

    --footer-menu-font-size: 1.25rem;   /* 20px */
    --footer-menu-line-height: 1.75rem; /* 28px */

    --testimonial-font-size: 1.375rem; /* 22px */
  }
}