:root[data-template="dandelion"] {
  --orange-100: #fbf1ec;
  --orange-200: #ff5000;
  --orange-300: #f46a2e;
  --orange-400: #d95a24;
  --orange-500: #fbe5db;
  --orange-600: #fbe5db;
  --black-100: #292929;
  --black-200: #332824;
  --black-300: #000000;
  --gray-100: #d2d2d2;
  --gray-200: #777777;
  --gray-300: #f2f2f2;
  --gray-400: #747474;
  --gray-500: #fdf5f2;
  --gray-600: #faf6f5;
  --white: #ffffff;
  --white-100: #f0e3dd;
  --red-200: #e00404;
  --blue-100: #c5dff2;
  --gray-700: #666362;
  --gray-800: #999593;
  --green-100: #89ca95;
  --peach-100: #fdf5f2;
  --peach-200: #faf6f5;
  --gray-300: #afafaf;
  --gray-400: #e7e6e9;
  --black-300: #1f1f1f;

  --color-bg: var(--white);
  --color-surface: var(--orange-100);
  --color-fg: var(--black-100);
  --color-muted: var(--black-200);
  --color-subtle: var(--gray-200);
  --color-primary: var(--orange-300);
  --color-primary-hover: var(--orange-400);
  --color-primary-fg: var(--white);
  --color-primary-sg: var(--gray-500);
  --color-primary-vg: var(--orange-600);
  --color-accent: var(--orange-400);
  --color-danger: var(--red-200);
  --color-divider: var(--white-100);
  --color-text-inverse: var(--white);
  --color-surface-tertiary: var(--gray-600);
  --color-credit-overlay: var(--blue-100);
  --color-media-fallback: var(--gray-400);
  --color-card-overlay: rgba(0, 0, 0, 0.7);
  --color-card-overlay-solid: var(--black-300);

  --color-body-secondary: var(--gray-700);
  --color-small-text: var(--gray-800);
  --color-status-online: var(--green-100);

  --radius-button: 12px;
  --radius-card: 24px;

  --color-rating-active: var(--color-primary);
  --color-rating-empty: var(--gray-100);

  --color-card-surface: var(--peach-100);
  --color-input-bg: var(--peach-200);
  --color-switch-off: var(--white-100);
  --color-switch-on: rgba(226, 78, 15, 0.5);
  --color-swatch-ring: var(--gray-400);
  --color-text-disabled: #999999;
  --color-bg-disabled: #f5f5f5;
  --color-brand-light: #ffeae0;
  --color-brand-hover: #f5804d;
  --color-brand-pressed: #d95b22;
  --color-card-border: #f2f2f2;
  --color-chip-bg: #f7f7f7;
  --color-card-media: #ebebeb;
  --color-heading-body: #333231;
  --color-price-fg: #333231;
  --color-pagination-current-bg: #f5f5f5;
  --color-pagination-muted: #999999;

  --gallery-backdrop: var(--black-300);
  --gallery-control: var(--white);
  --gallery-control-bg: rgba(255, 255, 255, 0.12);
  --gallery-control-bg-hover: rgba(255, 255, 255, 0.24);
  --gallery-arrow-bg: rgba(251, 241, 236, 0.2);
  --gallery-arrow-bg-hover: rgba(251, 241, 236, 0.4);
  --gallery-arrow-fg: var(--color-primary);
  --color-bg-card-media: var(--gray-300);
  --color-card-gradient-start: var(--gray-500);
  --color-card-gradient-end: var(--orange-500);
  --advantage-card-line-bg: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary) 50%,
    transparent 100%
  );

  --header-bg: var(--white);
  --header-border: rgba(0, 0, 0, 0.05);
  --header-shadow: 0 18px 60px rgba(41, 41, 41, 0.08);
  --header-bar-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  --running-line-height: 24px;
  --header-height: 48px;
  --header-height-desktop: 64px;
  --menu-offset-top: calc(var(--running-line-height) + var(--header-height));

  --container-max-width: 1480px;

  --font-weight-heading: 400;
  --font-weight-body-r: 400;
  --font-weight-body-m: 500;
  --font-weight-body-b: 600;

  --font-heading-size-h1: 32px;
  --font-heading-size-h2: 28px;
  --font-heading-size-h3: 24px;
  --font-heading-size-h4: 24px;
  --font-heading-size-h5: 20px;
  --font-heading-size-h6: 18px;
  --font-heading-size-h-modal: 24px;
  --font-heading-line-height-h1: 1.1;
  --font-heading-line-height-h2: 1.1;
  --font-heading-line-height-h3: 1.1;
  --font-heading-line-height-h4: 28px;
  --font-heading-line-height-h5: 1.2;
  --font-heading-line-height-h6: 1.2;
  --font-heading-line-height-h-modal: 1.1;

  --font-body-text-size-b1: 16px;
  --font-body-text-size-b2: 14px;
  --font-body-text-size-b3: 12px;
  --font-body-text-size-b4: 11px;
  --font-body-text-size-b5: 10px;
  --font-body-line-height-b1: 1.4;
  --font-body-line-height-b2: 1.4;
  --font-body-line-height-b3: 1.4;
  --font-body-line-height-b4: 1.4;
  --font-body-line-height-b5: 1.4;

  --breakpoint-xxs: 360px;
  --breakpoint-xl: 1440px;
}

:root[data-template="dandelion"] body {
  --font-heading: var(--font-lack);
  --font-body: var(--font-inter);
}

@media (min-width: 768px) {
  :root[data-template="dandelion"] {
    --font-heading-size-h1: 44px;
    --font-heading-size-h2: 40px;
    --font-heading-size-h3: 32px;
    --font-heading-size-h-modal: 44px;
  }
}

@media (min-width: 1200px) {
  :root[data-template="dandelion"] {
    --font-heading-size-h2: 44px;
    --running-line-height: 32px;
  }
}