:root[data-template="dandelion"] {
  --orange-100: #fbf1ec;
  --orange-200: #ff5000;
  --orange-300: #e24e0f;
  --orange-400: #ce4a10;
  --black-100: #292929;
  --black-200: #332824;
  --gray-100: #d2d2d2;
  --gray-200: #777777;
  --white: #ffffff;
  --white-100: #f0e3dd;
  --red-200: #e00404;

  --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-accent: var(--orange-400);
  --color-danger: var(--red-200);
  --color-divider: var(--white-100);

  --header-bg: var(--white);
  --header-border: rgba(240, 227, 221, 0.5);
  --header-shadow: 0 18px 60px rgba(41, 41, 41, 0.08);

  --running-line-height: 46px;
  --header-height: 60px;
  --header-height-desktop: 80px;
  --menu-offset-top: calc(var(--running-line-height) + var(--header-height));

  --container-max-width: 1336px;

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