/**
 * Weblytic — shared design tokens (colors, surfaces, radius, shadow, layout).
 * Typography tokens live in wbl-font.css. Page CSS should consume these — not redefine.
 */
:root {
  /* Brand / accent */
  --wbl-accent: #6d48ff;
  --wbl-accent-2: #3d7bff;
  --wbl-accent-soft: color-mix(in srgb, var(--wbl-accent) 12%, #fff);

  /* Surfaces */
  --wbl-bg: #f3f5fb;
  --wbl-surface: #fff;
  --wbl-surface-soft: #f7f8fd;
  --wbl-line: #e4e9f4;
  --wbl-line-strong: #d7dcf0;

  /* Semantic */
  --wbl-good-bg: #f0fff4;
  --wbl-bad-bg: #fff5f5;
  --wbl-good: #12a35c;
  --wbl-bad: #e2554a;

  /* Radius */
  --wbl-radius-sm: 10px;
  --wbl-radius: 14px;
  --wbl-radius-lg: 16px;
  --wbl-radius-xl: 18px;
  --wbl-radius-pill: 999px;

  /* Shadow */
  --wbl-shadow-sm: 0 4px 12px rgba(15, 27, 51, 0.04);
  --wbl-shadow: 0 8px 24px rgba(15, 27, 51, 0.05);
  --wbl-shadow-lg: 0 14px 40px rgba(15, 27, 51, 0.07);

  /* Layout rail */
  --wbl-max: 1600px;
  --wbl-container-pad-x: 2px;
  --wbl-gap: 20px;
  --wbl-gap-lg: 36px;

  /* Product-page aliases (backward compatible with older --wbl-pp-* usage) */
  --wbl-pp-ink: var(--wbl-ink, #0f1b33);
  --wbl-pp-muted: var(--wbl-ink-muted, #6a7590);
  --wbl-pp-line: var(--wbl-line);
  --wbl-pp-soft: var(--wbl-surface-soft);
  --wbl-pp-accent: var(--wbl-accent);
  --wbl-pp-accent-2: var(--wbl-accent-2);
  --wbl-pp-radius: var(--wbl-radius-lg);
  --wbl-pp-shadow: var(--wbl-shadow-lg);
}