/* WebWiz design tokens — the ONLY values generated templates may use.
 *
 * Generated templates never contain raw hex colors, raw px font sizes, or
 * ad-hoc font stacks: every visual decision routes through these custom
 * properties. Color slots carry neutral fallbacks here; the real values are
 * supplied per-template by theme.css (palette-driven, AI-composed), which
 * only ASSIGNS tokens — it never introduces new selectors with raw values.
 * Enforced by the static lint in template_qa.py.
 */

:root {
  /* ---- Spacing scale (4px base, geometric-ish) -------------------------- */
  --space-1: 0.25rem;   /*   4px */
  --space-2: 0.5rem;    /*   8px */
  --space-3: 0.75rem;   /*  12px */
  --space-4: 1rem;      /*  16px */
  --space-5: 1.5rem;    /*  24px */
  --space-6: 2rem;      /*  32px */
  --space-7: 3rem;      /*  48px */
  --space-8: 4rem;      /*  64px */
  --space-9: 6rem;      /*  96px */
  --space-10: 8rem;     /* 128px */
  --space-11: 10rem;    /* 160px */
  --space-12: 12rem;    /* 192px */

  /* ---- Type scale + matching line heights ------------------------------- */
  --text-xs: 0.75rem;    --leading-xs: 1.1;
  --text-sm: 0.875rem;   --leading-sm: 1.45;
  --text-base: 1rem;     --leading-base: 1.6;
  --text-lg: 1.125rem;   --leading-lg: 1.6;
  --text-xl: 1.25rem;    --leading-xl: 1.5;
  --text-2xl: 1.5rem;    --leading-2xl: 1.35;
  --text-3xl: 1.875rem;  --leading-3xl: 1.25;
  --text-4xl: 2.5rem;    --leading-4xl: 1.12;
  --text-5xl: 3.5rem;    --leading-5xl: 1.05;

  /* ---- Radii + shadows --------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.07), 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 14px 34px rgb(0 0 0 / 0.12), 0 4px 10px rgb(0 0 0 / 0.06);

  /* ---- Motion (skills addendum: restraint by default) -------------------
   * Exponential-feel ease-out, no bounce/elastic; product moments stay in
   * the fast band. Animations belong to the signature element + micro-
   * interactions only, and the reduced-motion override below always wins. */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ---- Semantic color slots (values supplied per-palette by theme.css) --- */
  --color-bg: #ffffff;
  --color-surface: #f6f6f6;
  --color-text: #16181a;
  --color-text-muted: #51565c;
  --color-primary: #1f2937;
  --color-primary-contrast: #ffffff;
  --color-accent: #946800;
  --color-border: #e3e5e8;

  /* ---- Font slots (faces supplied per-palette by theme.css) -------------- */
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
}

/* ---- Baseline element styling every generated page inherits -------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

p { margin: 0 0 var(--space-4); }

img, svg { max-width: 100%; height: auto; }

a { color: var(--color-primary); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}