/*
 * Styling for the starter block (non-Tailwind projects).
 *
 * Self-contained starter: the project boots against @juo/blocks alone. The
 * tokens below define a small design scale (the `--space-*` spacing scale, the
 * `--font-size-*` type scale, and the `--tint-*` neutral palette) so the block
 * follows a consistent scale. On a live storefront these variables are provided
 * by the merchant's theme, so prefer tokens over hardcoded values.
 */

:root {
  --space-8: 8px;
  --space-12: 12px;
  --space-32: 32px;

  --font-size-12: 12px;
  --font-size-16: 16px;

  --tint-500: oklch(62% 0 0);
  --tint-900: oklch(18% 0 0);
}

.starter-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  padding: var(--space-32);
}

.starter-block__info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.starter-block__icons {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* Defaults to a neutral color; overridden inline by the color control. */
  color: var(--tint-900);
}

.starter-block__icon {
  width: var(--space-32);
  height: var(--space-32);
}

.starter-block__text {
  display: flex;
  flex-direction: column;
}

.starter-block__subtitle {
  font-size: var(--font-size-12);
  color: var(--tint-500);
}

.starter-block__title {
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--tint-900);
}