:root {
  /* Font families */
  --font-family-main: "TikTok Sans", Arial, sans-serif;
  --font-family-accent: "Inter", Arial, sans-serif;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Font sizes from desktop Figma */
  --font-size-100: 12px;
  --font-size-150: 14px;
  --font-size-200: 16px;
  --font-size-300: 18px;
  --font-size-400: 24px;
  --font-size-500: 32px;
  --font-size-600: 40px;
  --font-size-800: 56px;
  --font-size-900: 68px;
  --font-size-925: 96px;

  --font-size-hero: 72px;
  --font-size-price-unit: 24px;
  --font-size-price-unit-sup: 15.48px;
  --font-size-old-price-unit: 20px;

  /* Line heights */
  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.4;

  /* Letter spacing */
  --letter-spacing-none: 0;
  --letter-spacing-title-md: -1.2px;
  --letter-spacing-contact: -2.04px;

  /* Semantic typography: desktop */
  --type-hero-size: var(--font-size-hero);
  --type-hero-line-height: var(--line-height-none);
  --type-hero-weight: var(--font-weight-semibold);
  --type-hero-subtitle-size: var(--font-size-500);
  --type-hero-subtitle-line-height: var(--line-height-none);

  --type-section-title-size: var(--font-size-800);
  --type-section-title-line-height: var(--line-height-tight);
  --type-section-title-weight: var(--font-weight-semibold);
  --type-subtitle-size: var(--font-size-400);
  --type-subtitle-line-height: var(--line-height-normal);

  --type-card-title-size: var(--font-size-600);
  --type-card-title-letter-spacing: var(--letter-spacing-title-md);
  --type-card-title-sm-size: var(--font-size-500);
  --type-card-title-sm-line-height: var(--line-height-snug);

  --type-body-size: var(--font-size-300);
  --type-body-line-height: var(--line-height-relaxed);
  --type-body-sm-size: var(--font-size-200);
  --type-body-sm-line-height: var(--line-height-normal);
  --type-chip-size: var(--font-size-200);
  --type-chip-line-height: var(--line-height-normal);
  --type-button-size: var(--font-size-300);
  --type-button-line-height: var(--line-height-snug);

  --type-price-size: var(--font-size-600);
  --type-price-line-height: var(--line-height-none);
  --type-price-unit-size: var(--font-size-price-unit);
  --type-stat-size: var(--font-size-925);
  --type-contact-size: var(--font-size-900);
  --type-contact-line-height: var(--line-height-tight);
  --type-contact-letter-spacing: var(--letter-spacing-contact);

  /* Colors */
  --color-brand-orange: #f5821f;
  --color-danger: #d02121;

  --color-text-primary: #2d292a;
  --color-text-strong: #1f1f1f;
  --color-text-faq: #222426;
  --color-text-inverse: #ffffff;
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.6);
  --color-text-muted: #969696;
  --color-text-secondary: rgba(0, 0, 0, 0.55);
  --color-text-tertiary: rgba(0, 0, 0, 0.3);

  --color-bg-page: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-muted: #f2f2f1;
  --color-bg-section-muted: #f3f3f3;
  --color-bg-inverse: #141414;
  --color-bg-inverse-card: rgba(43, 43, 43, 0.74);
  --color-bg-control: #dee1e6;
  --color-bg-glass: rgba(255, 255, 255, 0.18);

  --color-border-muted: rgba(0, 0, 0, 0.25);
  --color-border-map: #cbd4de;
  --color-icon-secondary: rgba(0, 0, 0, 0.7);
  --color-control-dark: rgba(42, 44, 53, 0.7);

  --color-benefit-sand: #e1dac8;
  --color-benefit-cream: #ddddca;
  --color-benefit-clay: #d8c0ab;
  --color-benefit-gray: #d9d9d9;

  /* Spacing scale */
  --space-0: 0;
  --space-025: 2px;
  --space-050: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-350: 28px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-800: 64px;
  --space-1000: 80px;
  --space-1200: 96px;
  --space-1500: 120px;

  /* Layout spacing: desktop */
  --page-padding-inline: var(--space-300);
  --section-content-gap: var(--space-800);
  --chip-column-gap: var(--space-100);
  --chip-row-gap: var(--space-150);

  /* Layout widths */
  --container-max-width: 1320px;
  --container-narrow-width: 872px;
  --container-text-width: 901px;
  --container-freeze-width: 965px;
  --product-info-width: 421px;
  --product-media-width: 810px;
  --card-width: 424px;

  /* Media ratios instead of fixed content heights */
  --media-product-aspect: 810 / 706;
  --media-sale-aspect: 424 / 352;
  --media-video-aspect: 648 / 312;
  --media-freeze-aspect: 947 / 384;

  /* Controls */
  --tap-target-min: 44px;
  --button-min-block-size: 56px;
  --button-hero-min-block-size: 86px;
  --button-padding-inline: var(--space-300);
  --button-radius: 8px;
  --button-hero-radius: 16px;
  --control-oval-size: 48px;
  --control-faq-size: 56px;
  --control-faq-circle-size: 40px;
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --swatch-size: 28px;
  --progress-size: 7px;
  --slider-dot-size: 6px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-control: 64px;
  --radius-benefit-tall: 60px;
  --radius-benefit-large: 80px;
  --radius-pill: 9999px;

  /* Borders */
  --border-width-hairline: 1px;
  --border-width-active: 2px;

  /* Effects */
  --blur-glass: 33.6px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-medium: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  :root {
    /* Mobile design: XS 360px frame, 336px content column */
    --page-padding-inline: var(--space-150);
    --container-max-width: 336px;
    --container-narrow-width: 336px;
    --container-text-width: 336px;
    --container-freeze-width: 336px;
    --product-info-width: 100%;
    --product-media-width: 100%;
    --card-width: 100%;

    /* Mobile typography */
    --type-hero-size: 32px;
    --type-hero-line-height: var(--line-height-none);
    --type-hero-subtitle-size: 18px;
    --type-section-title-size: 28px;
    --type-subtitle-size: 16px;
    --type-card-title-size: 24px;
    --type-card-title-letter-spacing: -0.72px;
    --type-card-title-sm-size: 20px;
    --type-body-size: 14px;
    --type-body-sm-size: 14px;
    --type-chip-size: 12px;
    --type-button-size: 14px;
    --type-price-size: 24px;
    --type-price-unit-size: 16px;
    --type-stat-size: 48px;
    --type-contact-size: 32px;
    --type-contact-letter-spacing: -0.96px;

    /* Mobile spacing */
    --section-content-gap: var(--space-400);
    --chip-column-gap: var(--space-050);
    --chip-row-gap: var(--space-150);

    /* Mobile media ratios */
    --media-product-aspect: 336 / 292;
    --media-sale-aspect: 336 / 271;
    --media-video-aspect: 336 / 162;
    --media-freeze-aspect: 272 / 111;

    /* Mobile controls */
    --button-min-block-size: 48px;
    --button-hero-min-block-size: 56px;
    --button-padding-inline: var(--space-250);
    --button-radius: 8px;
    --button-hero-radius: 8px;
    --control-oval-size: 40px;
    --swatch-size: 18px;
    --progress-size: 7px;

    /* Mobile radius */
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-benefit-tall: 48px;
    --radius-benefit-large: 48px;
  }
}