/*
  Design tokens — the single source of truth for every visual value.
  Synced from Figma "Super Healthee Microsite" (file Xrq3wR2hE7jigGSjEj13fi).

  Layers (same as the Figma collections):
  1. Primitives  (01 Primitives)  raw values. The ONLY place raw colors live.
  2. Semantic    (02 Semantic)    what a color is FOR. Always points at a primitive.
  3. Typography  (03 Typography)  per-text-style values, with Mobile and Desktop modes.

  Naming: Figma "Group/name" → CSS "--color-name" (the group is dropped because
  each Figma name already starts with it, e.g. Text/text-primary → --color-text-primary).

  Components and layouts use semantic and typography tokens only — never primitives.
  All sizes are in rem (1rem = 16px); the Figma px value is noted alongside.
*/

:root {
  /* ===================== 01 Primitives: color ===================== */

  /* Base */
  --color-white-500: #ffffff;
  --color-black-500: #000000;
  --color-gray-050: #fafafa;
  --color-gray-300: #c7c7c7;
  --color-gray-500: #999997;
  --color-gray-700: #5c5c5c;

  /* Cream */
  --color-cream-100: #f9f5eb;

  /* Brown */
  --color-brown-100: #fbeedf;
  --color-brown-300: #cca97f;
  --color-brown-500: #976928;
  --color-brown-700: #643f01;
  --color-brown-900: #311d00;

  /* Green */
  --color-green-100: #e6f4ef;
  --color-green-300: #72998d;
  --color-green-500: #004436;
  --color-green-700: #00281f;
  --color-green-900: #00100b;

  /* Light Green */
  --color-light-green-100: #edf4da;
  --color-light-green-300: #c9db91;
  --color-light-green-500: #a8c050;
  --color-light-green-700: #697c0e;
  --color-light-green-900: #343f01;

  /* Magenta */
  --color-magenta-100: #ffeaef;
  --color-magenta-300: #da849f;
  --color-magenta-500: #9b2657;
  --color-magenta-700: #690034;
  --color-magenta-900: #340017;

  /* Lilac */
  --color-lilac-100: #f2eef8;
  --color-lilac-300: #d8cde8;
  --color-lilac-500: #beaed4;
  --color-lilac-700: #7b6d8d;
  --color-lilac-900: #3f354b;

  /* Yellow */
  --color-yellow-100: #fcefd2;
  --color-yellow-300: #ffde8d;
  --color-yellow-500: #ffcb35;
  --color-yellow-700: #a78101;
  --color-yellow-900: #564200;

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

  /* ===================== 01 Primitives: font families ===================== */
  /* Files are in /assets/fonts, loaded with @font-face in typography.css.
     Weight note: the Biago files store unusual weight numbers (Light=100, Regular=300,
     SemiBold=500), so a Figma weight variable of 300 means the REGULAR file.
     In CSS we use standard numbers: Light 300, Regular 400, SemiBold 600, and each
     token below matches the style Figma actually renders (Light/Regular/Semi Bold). */
  --font-family-biago: "Biago", system-ui, sans-serif;
  --font-family-batuphat-script: "Batuphat Script", cursive;
  --font-family-nersans-two: "Nersans Two", system-ui, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* code only, not in Figma */

  /* ===================== Primitives NOT in Figma yet (placeholders) ===================== */
  /* Figma has no spacing, radius, shadow or size variables yet. Replace when added. */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-34: 2.125rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-54: 3.375rem;
  --space-61: 3.8125rem;
  --space-64: 4rem;
  --space-78: 4.875rem;
  --space-80: 5rem;
  --space-100: 6.25rem;
  --space-120: 7.5rem;
  --space-96: 6rem;

  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-16: 1rem;
  --radius-24: 1.5rem;
  --radius-full: 9999px;

  --shadow-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.08);
  --shadow-2: 0 0.25rem 0.75rem rgb(0 0 0 / 0.12);
  --shadow-glow: 0 0.125rem 3.125rem rgb(255 247 189 / 0.22);  /* Figma: testimonial card drop shadow, y 2, blur 50, #FFF7BD 22% */

  --size-1: 0.0625rem;      /* 1px */
  --size-2: 0.125rem;       /* 2px */
  --size-24: 1.5rem;        /* 24px */
  --size-30: 1.875rem;      /* 30px */
  --size-40: 2.5rem;        /* 40px */
  --size-44: 2.75rem;       /* 44px — minimum touch target */
  --size-48: 3rem;          /* 48px */
  --size-56: 3.5rem;        /* 56px */
  --size-60: 3.75rem;       /* 60px */
  --size-64: 4rem;          /* 64px */
  --size-80: 5rem;          /* 80px */
  --size-84: 5.25rem;       /* 84px */
  --size-96: 6rem;          /* 96px */
  --size-100: 6.25rem;      /* 100px */
  --size-160: 10rem;        /* 160px */
  --size-176: 11rem;        /* 176px */
  --size-200: 12.5rem;      /* 200px */
  --size-222: 13.875rem;    /* 222px */
  --size-244: 15.25rem;     /* 244px */
  --size-280: 17.5rem;      /* 280px */
  --size-295: 18.4375rem;   /* 295px */
  --size-323: 20.1875rem;   /* 323px */
  --size-320: 20rem;        /* 320px */
  --size-340: 21.25rem;     /* 340px */
  --size-387: 24.1667rem;   /* 386.67px — Figma vertical dish card width */
  --size-390: 24.375rem;    /* 390px — Figma mobile frame */
  --size-500: 31.25rem;     /* 500px */
  --size-503: 31.4375rem;   /* 503px */
  --size-600: 37.4688rem;   /* 599.5px */
  --size-630: 39.375rem;    /* 630px */
  --size-800: 50rem;        /* 800px */
  --size-400: 25rem;        /* 400px */
  --size-420: 26.25rem;     /* 420px */
  --size-413: 25.8333rem;   /* 413.33px — Figma desktop card width */
  --size-590: 36.875rem;    /* 590px — Figma horizontal dish card width */
  --size-1280: 80rem;       /* 1280px */
  --size-480: 30rem;        /* 480px */

  --duration-250: 250ms;
  --easing-out: cubic-bezier(0.2, 0, 0, 1);
  --size-1200: 75rem;       /* 1200px */


  /* ===================== 02 Semantic: color ===================== */

  /* Text */
  --color-text-heading: var(--color-green-700);
  --color-text-primary: var(--color-green-700);
  --color-text-primary-alt: var(--color-brown-700);
  --color-text-primary-light: var(--color-white-500);
  --color-text-primary-faded: color-mix(in srgb, var(--color-white-500) 60%, transparent); /* white at 60% */
  --color-text-secondary: var(--color-green-500);
  --color-text-secondary-alt: var(--color-brown-500);
  --color-text-secondary-light: var(--color-cream-100);
  --color-text-accent: var(--color-light-green-500);
  --color-text-accent-light: var(--color-light-green-100);
  --color-text-accent-alt: var(--color-magenta-500);
  --color-text-accent-alt-light: var(--color-magenta-100);

  /* Button — primary */
  --color-button-fill-primary: var(--color-light-green-500);
  --color-button-border-primary: var(--color-light-green-500);
  --color-button-text-primary: var(--color-white-500);
  --color-button-fill-primary-hover: var(--color-light-green-700);
  --color-button-border-primary-hover: var(--color-light-green-700);
  --color-button-text-primary-hover: var(--color-white-500);
  --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 */
  --color-button-fill-secondary: var(--color-magenta-500);
  --color-button-border-secondary: var(--color-magenta-300);
  --color-button-text-secondary: var(--color-white-500);
  --color-button-text-secondary-alt: var(--color-magenta-700);
  --color-button-fill-secondary-hover: var(--color-magenta-700);
  --color-button-border-secondary-hover: var(--color-magenta-700);
  --color-button-text-secondary-hover: var(--color-gray-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-cream-100);
  --color-button-text-secondary-light: var(--color-cream-100);
  --color-button-border-secondary-light-hover: var(--color-cream-100);
  --color-button-fill-secondary-light-hover: var(--color-cream-100);
  --color-button-text-secondary-light-hover: var(--color-magenta-500);

  /* Background */
  --color-background-primary: var(--color-white-500);
  --color-background-secondary: var(--color-gray-050);
  --color-background-black: var(--color-black-500);
  --color-background-light: var(--color-cream-100);
  --color-background-brand: var(--color-green-500);
  --color-background-brand-light: var(--color-green-100);
  --color-background-brand-dark: var(--color-green-900);
  --color-background-brand-alt: var(--color-light-green-500);
  --color-background-brand-alt-light: var(--color-light-green-100);
  --color-background-brand-alt-dark: var(--color-light-green-900);
  --color-background-accent: var(--color-brown-500);
  --color-background-accent-light: var(--color-brown-100);
  --color-background-accent-dark: var(--color-brown-900);
  --color-background-accent-alt: var(--color-magenta-500);
  --color-background-accent-alt-light: var(--color-magenta-100);
  --color-background-accent-alt-dark: var(--color-magenta-900);
  --color-background-ratings: var(--color-yellow-500);
  --color-background-grab: var(--color-green-grab-500);
  --color-background-foodpanda: var(--color-pink-500);
  --color-background-shopeefood: var(--color-orange-500);

  /* Border */
  --color-border-primary: var(--color-light-green-100);
  --color-border-primary-subtle: color-mix(in srgb, var(--color-light-green-100) 10%, transparent);  /* Figma: #EDF4DA at 10% */

  /* Added in code (not in Figma): keyboard focus outline */
  --color-focus-ring: var(--color-green-500);
  --color-focus-ring-light: var(--color-cream-100);  /* for dark backgrounds */

  /* Added in code (not in Figma): photo overlay, Figma's hero gradient black → black 20% */
  /* From a linked Figma library variable (text/--color-text-primary-light-subtle), not this file's variables */
  --color-text-primary-light-subtle: color-mix(in srgb, var(--color-white-500) 80%, transparent);

  --color-overlay-strong: var(--color-black-500);
  --color-overlay-soft: color-mix(in srgb, var(--color-black-500) 20%, transparent);


  /* ===================== Semantic NOT in Figma yet (placeholders) ===================== */
  --space-xs: var(--space-4);
  --space-sm: var(--space-8);
  --space-md: var(--space-16);
  --space-lg: var(--space-24);
  --space-xl: var(--space-32);
  --space-2xl: var(--space-48);
  --space-3xl: var(--space-64);
  --space-section: var(--space-96);

  /* Page gutters and section spacing (from the Figma page frames) */
  --space-gutter: var(--space-20);              /* mobile page side padding */
  --space-section-block: var(--space-80);       /* desktop section top/bottom */
  --space-section-block-mobile: var(--space-40);
  --space-section-gap: var(--space-40);         /* heading → content */
  --space-section-gap-mobile: var(--space-32);
  --space-card-gap: var(--space-20);            /* between cards in a row */
  --size-card-min: var(--size-280);             /* narrowest card before a row drops a column */
  --space-stack-gap: var(--space-8);            /* between stacked badges */

  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-8);
  --radius-lg: var(--radius-16);
  --radius-pill: var(--radius-full);

  /* Button (from Figma component "Button", node 57:297) */
  --button-radius: var(--radius-8);
  --button-padding-block-large: var(--space-16);
  --button-padding-inline-large: var(--space-24);
  --button-padding-block-medium: var(--space-12);
  --button-padding-inline-medium: var(--space-16);

  /* Navigation bar (from Figma component "Navbar", node 58:1198) */
  --navbar-padding-block: var(--space-20);
  --navbar-padding-block-mobile: var(--space-12);
  --navbar-padding-inline-mobile: var(--space-20);
  --navbar-logo-height: var(--size-64);
  --navbar-logo-height-mobile: var(--size-40);
  --navbar-link-gap: var(--space-48);            /* Figma navbar with 4 links (145:4509) */
  --navbar-toggle-icon-size: var(--size-40);
  --navbar-menu-padding: var(--space-20);
  --navbar-menu-gap: var(--space-8);
  --navbar-menu-item-height: var(--size-80);

  /* Footer (from Figma component "Footer", node 58:1308) */
  --footer-padding: var(--space-80);
  --footer-padding-block-mobile: var(--space-40);
  --footer-padding-inline-mobile: var(--space-20);
  --footer-content-max: var(--size-1280);
  --footer-section-gap: var(--space-32);
  --footer-section-gap-mobile: var(--space-40);
  --footer-brand-width: var(--size-400);
  --footer-brand-gap: var(--space-32);
  --footer-brand-gap-mobile: var(--space-24);
  --footer-text-gap: var(--space-8);
  --footer-logo-height: var(--size-100);
  --footer-logo-height-mobile: var(--size-80);
  --footer-list-gap: var(--space-16);

  /* Social links (round Facebook / Instagram buttons; footer and Menu "find us" panel) */
  --social-links-gap: var(--space-24);
  --social-links-gap-tight: var(--space-12);
  --social-links-size: var(--size-60);
  --social-links-icon-size: var(--size-30);

  /* Providers badge (from Figma component "Providers Badge", node 57:240) */
  --providers-badge-radius: var(--radius-8);
  --providers-badge-gap: var(--space-16);
  --providers-badge-padding: var(--space-16);
  --providers-badge-padding-compact: var(--space-8);
  --providers-badge-logo-gap: var(--space-8);
  --providers-badge-logo-size: var(--size-48);
  --providers-badge-logo-size-large: var(--size-56);
  --providers-badge-logo-size-xl: var(--size-64);   /* logos-only variant (Menu "find us" panel) */
  --providers-badge-logo-radius: var(--radius-8);
  --providers-badge-venue-radius: var(--radius-4);
  --providers-badge-logo-inset: var(--space-4);
  --providers-badge-text-gap: var(--size-2);
  --providers-badge-text-gap-large: var(--space-4);

  /* Testimonial card (from Figma component "testimonial-card", node 58:899) */
  --testimonial-card-radius: var(--radius-24);
  --testimonial-card-padding: var(--space-32);
  --testimonial-card-gap: var(--space-16);
  --testimonial-card-shadow: var(--shadow-glow);
  --testimonial-card-rating-gap: var(--space-12);
  --testimonial-card-star-gap: var(--space-8);
  --testimonial-card-star-size: var(--size-24);
  --testimonial-card-quote-gap: var(--space-8);

  /* Dish card (from Figma component "Dish Card", node 58:1055) */
  --dish-card-radius: var(--radius-24);
  --dish-card-padding: var(--space-32);
  --dish-card-gap: var(--space-8);
  --dish-card-image-height: var(--size-320);

  /* Plain card (from Figma component "card", node 58:827) */
  --plain-card-radius: var(--radius-24);
  --plain-card-padding: var(--space-32);
  --plain-card-gap: var(--space-32);
  --plain-card-content-gap: var(--space-8);
  --plain-card-shadow: var(--shadow-glow);
  --plain-card-icon-height: var(--size-80);

  /* Split section (text panel + photo; Home closing section, 404) */
  --split-section-gap: var(--space-48);
  --split-section-gap-mobile: var(--space-32);
  --split-section-media-height-mobile: var(--size-200);
  --split-section-media-width: 44.1667%;        /* 636px of 1440px */

  /* Closing call to action (Home, Branches): heading + badges, photo with sticker */
  --closing-cta-heading-gap: var(--space-20);
  --closing-cta-heading-gap-mobile: var(--space-16);
  --closing-cta-sticker-size: var(--size-176);
  --closing-cta-sticker-size-mobile: var(--size-96);
  --closing-cta-sticker-left: var(--space-34);
  --closing-cta-sticker-left-mobile: var(--space-20);
  --closing-cta-sticker-top: var(--size-244);
  --closing-cta-sticker-top-mobile: var(--size-84);

  /* Location card (from the Branches page, Figma node 58:2146) */
  --location-card-padding: var(--space-80);
  --location-card-padding-block-mobile: var(--space-40);
  --location-card-gap: var(--space-40);
  --location-card-gap-mobile: var(--space-32);
  --location-card-text-gap: var(--space-16);
  --location-card-min-height: var(--size-420);
  --location-card-photo-height-mobile: var(--size-200);

  /* Branches page (Figma frames 58:1940 desktop / 66:3033 mobile) */
  --branches-header-padding-block-mobile: var(--space-40);

  /* 404 page (Figma frames 74:3471 desktop / 75:3744 mobile) */
  --not-found-padding-block: var(--space-120);
  --not-found-gap: var(--space-40);
  --not-found-heading-gap: var(--space-20);
  --not-found-heading-width: var(--size-500);

  /* Partnerships page (Figma frames 145:4509 desktop / 145:4621 mobile) */
  --partnerships-padding-block: var(--space-120);
  --partnerships-gap: var(--space-40);
  --partnerships-heading-gap: var(--space-20);

  /* Section heading (eyebrow + title) */
  --section-heading-gap: var(--space-8);

  /* Page header (illustration + h1 + subtitle; Menu page) */
  --page-header-padding-block: var(--space-40);
  --page-header-padding-block-mobile: var(--space-20);
  --page-header-gap: var(--space-24);
  --page-header-text-gap: var(--space-8);
  --page-header-icon-height: var(--size-100);
  --page-header-content-width: var(--size-800);

  /* Menu page (Figma frames 4:927 desktop / 66:2769 mobile) */
  --menu-dishes-gap: var(--space-80);           /* dish grid → find-us panel */
  --menu-find-us-radius: var(--radius-24);
  --menu-find-us-padding: var(--space-32);
  --menu-find-us-gap: var(--space-32);
  --menu-find-us-text-gap: var(--space-8);
  --menu-find-us-content-gap: var(--space-24);   /* logos → text */
  --menu-find-us-social-gap: var(--space-16);    /* "Connect with us" → icons */
  --menu-find-us-text-width: var(--size-630);
  --menu-find-us-shadow: var(--shadow-glow);

  /* Home page (page-specific, from Figma frames 4:168 desktop / 66:2411 mobile) */
  --home-hero-padding-block: var(--space-100);
  --home-hero-gap: var(--space-48);
  --home-hero-gap-mobile: var(--space-40);
  --home-hero-heading-gap: var(--space-32);
  --home-hero-heading-gap-mobile: var(--space-16);
  --home-hero-heading-width: var(--size-503);
  --home-featured-gap: var(--space-54);
  --home-sticker-purpose-width: var(--size-295);
  --home-sticker-purpose-left: var(--size-600);
  --home-sticker-purpose-top: var(--size-323);
  --home-sticker-reset-width: var(--size-222);
  --home-sticker-reset-top: var(--space-61);

  /* Motion (not in Figma) */
  --motion-duration-menu: var(--duration-250);
  --motion-easing-menu: var(--easing-out);

  --shadow-card: var(--shadow-1);
  --shadow-raised: var(--shadow-2);

  --border-width: var(--size-1);
  --size-hairline: var(--size-1);
  --focus-ring-width: var(--size-2);
  --size-touch-target: var(--size-44);
  --size-content-max: var(--size-1200);
  --size-content-wide: var(--size-1280);
  --size-swatch-min: var(--size-160);
  --size-demo-min: var(--size-320);
  --size-demo-mobile: var(--size-390);
  --size-demo-tall: var(--size-480);
  --size-demo-card: var(--size-413);
  --size-demo-card-mobile: var(--size-340);
  --size-demo-dish: var(--size-387);
  --size-demo-wide: var(--size-590);


  /* ===================== 03 Typography — Mobile mode (default) ===================== */

  /* Added in code (not in Figma): bold text inside paragraphs uses Biago Semi Bold */
  --strong-font-weight: 600;
  /* Added in code (not in Figma): code snippets in the style guide */
  --code-font-family: var(--font-family-mono);
  /* Font family and weight are the same in both modes, so they're only set here. */

  --h1-font-family: var(--font-family-biago);
  --h1-font-weight: 600;
  --h1-font-size: 2.25rem;        /* 36px */
  --h1-line-height: 2.5rem;       /* 40px */
  --h1-letter-spacing: 0;

  --h2-font-family: var(--font-family-biago);
  --h2-font-weight: 400;
  --h2-font-size: 2rem;           /* 32px */
  --h2-line-height: 2.5rem;       /* 40px */
  --h2-letter-spacing: 0;

  --h3-font-family: var(--font-family-biago);
  --h3-font-weight: 400;
  --h3-font-size: 1.75rem;        /* 28px */
  --h3-line-height: 2rem;         /* 32px */
  --h3-letter-spacing: 0;

  --h4-font-family: var(--font-family-batuphat-script);
  --h4-font-weight: 400;         /* Figma var says 300; style renders Batuphat Script Regular (only weight) */
  --h4-font-size: 1.625rem;       /* 26px */
  --h4-line-height: 2rem;         /* 32px */
  --h4-letter-spacing: 0;

  --h5-font-family: var(--font-family-biago);
  --h5-font-weight: 400;
  --h5-font-size: 1.375rem;       /* 22px */
  --h5-line-height: 1.65rem;      /* 26.4px */
  --h5-letter-spacing: 0;

  --h6-font-family: var(--font-family-biago);
  --h6-font-weight: 400;
  --h6-font-size: 1.25rem;        /* 20px */
  --h6-line-height: 1.5rem;       /* 24px */
  --h6-letter-spacing: 0;

  --paragraph-font-family: var(--font-family-biago);
  --paragraph-font-weight: 400;  /* Figma var says 300; style renders Biago Regular — see note above */
  --paragraph-font-size: 1rem;    /* 16px */
  --paragraph-line-height: 1.4rem; /* 22.4px */
  --paragraph-letter-spacing: 0;

  --body-xl-font-family: var(--font-family-biago);
  --body-xl-font-weight: 300;
  --body-xl-font-size: 1.125rem;  /* 18px */
  --body-xl-line-height: 1.5rem;  /* 24px */
  --body-xl-letter-spacing: 0;

  --body-l-font-family: var(--font-family-biago);
  --body-l-font-weight: 300;
  --body-l-font-size: 1rem;       /* 16px */
  --body-l-line-height: 1.5rem;   /* 24px */
  --body-l-letter-spacing: 0;

  --body-m-font-family: var(--font-family-biago);
  --body-m-font-weight: 300;
  --body-m-font-size: 0.875rem;   /* 14px */
  --body-m-line-height: 1.25rem;  /* 20px */
  --body-m-letter-spacing: 0;

  --body-s-font-family: var(--font-family-biago);
  --body-s-font-weight: 300;
  --body-s-font-size: 0.75rem;    /* 12px */
  --body-s-line-height: 1rem;     /* 16px */
  --body-s-letter-spacing: 0;

  --body-xs-font-family: var(--font-family-biago);
  --body-xs-font-weight: 300;
  --body-xs-font-size: 0.625rem;  /* 10px */
  --body-xs-line-height: 0.875rem; /* 14px */
  --body-xs-letter-spacing: 0;

  --button-l-font-family: var(--font-family-nersans-two);
  --button-l-font-weight: 400;
  --button-l-font-size: 1rem;     /* 16px */
  --button-l-line-height: 1.25rem; /* 20px */
  --button-l-letter-spacing: 0.0625rem; /* 1px */

  --button-m-font-family: var(--font-family-nersans-two);
  --button-m-font-weight: 400;
  --button-m-font-size: 0.875rem; /* 14px */
  --button-m-line-height: 1rem;   /* 16px */
  --button-m-letter-spacing: 0.0625rem; /* 1px */

  --nav-menu-font-family: var(--font-family-biago);
  --nav-menu-font-weight: 400;
  --nav-menu-font-size: 1rem;     /* 16px */
  --nav-menu-line-height: 1.5rem; /* 24px */
  --nav-menu-letter-spacing: 0;

  --accent-font-family: var(--font-family-biago);
  --accent-font-weight: 400;
  --accent-font-size: 1rem;       /* 16px */
  --accent-line-height: 1.125rem; /* 18px */
  --accent-letter-spacing: 0;

  --footer-menu-font-family: var(--font-family-biago);
  --footer-menu-font-weight: 400;
  --footer-menu-font-size: 1.25rem;   /* 20px */
  --footer-menu-line-height: 1.375rem; /* 22px */
  --footer-menu-letter-spacing: 0;
}


/* ===================== 03 Typography — Desktop mode ===================== */
/* Switches at 64rem (1024px). CSS can't use variables inside @media. */
@media (min-width: 64rem) {
  :root {
    --h1-font-size: 3.5rem;         /* 56px */
    --h1-line-height: 3.625rem;     /* 58px */

    --h2-font-size: 3rem;           /* 48px */
    --h2-line-height: 3.5rem;       /* 56px */

    --h3-font-size: 2.625rem;       /* 42px */
    --h3-line-height: 3rem;         /* 48px */

    --h4-font-size: 2.5rem;         /* 40px */
    --h4-line-height: 3rem;         /* 48px */

    --h5-font-size: 2rem;           /* 32px */
    --h5-line-height: 2.25rem;      /* 36px */

    --h6-font-size: 1.5rem;         /* 24px */
    --h6-line-height: 1.625rem;     /* 26px */

    /* paragraph: same in both modes */

    --body-xl-font-size: 1.25rem;   /* 20px */
    --body-xl-line-height: 1.375rem; /* 22px */

    --body-l-font-size: 1.125rem;   /* 18px */
    --body-l-line-height: 1.375rem; /* 22px */

    --body-m-font-size: 1rem;       /* 16px */
    --body-m-line-height: 1.125rem; /* 18px */

    --body-s-font-size: 0.875rem;   /* 14px */
    --body-s-line-height: 1rem;     /* 16px */

    --body-xs-font-size: 0.75rem;   /* 12px */
    --body-xs-line-height: 1rem;    /* 16px */

    --button-l-font-size: 1.125rem; /* 18px */
    --button-l-line-height: 1.375rem; /* 22px */
    --button-l-letter-spacing: 0.125rem; /* 2px */

    --button-m-font-size: 1rem;     /* 16px */
    --button-m-line-height: 1.125rem; /* 18px */
    --button-m-letter-spacing: 0.125rem; /* 2px */

    --nav-menu-font-size: 1.25rem;  /* 20px */
    --nav-menu-line-height: 1.375rem; /* 22px */

    --accent-font-size: 1.125rem;   /* 18px */
    --accent-line-height: 1.25rem;  /* 20px */

    --footer-menu-font-size: 1.5rem;    /* 24px */
    --footer-menu-line-height: 1.625rem; /* 26px */
  }
}