/*
 * impeccable.style — design tokens + minimal reset
 *
 * Shared by every page on the site (landing + generated sub-pages).
 * Keep this file small and dependency-free.
 */

/* ============================================
   MINIMAL CSS RESET
   ============================================ */

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

* {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
}

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Spacing Scale */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 80px;
  --spacing-3xl: 120px;

  /* Width */
  --width-max: 1400px;
  --width-content: 900px;

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;
  --duration-slower: 0.8s;
  --duration-slowest: 1.2s;

  /* Core Colors - Light Mode */
  --color-ink: oklch(10% 0 0);
  --color-text: oklch(10% 0 0);
  --color-paper: oklch(98% 0 0);
  --color-cream: oklch(96% 0.005 350);
  --color-charcoal: oklch(25% 0 0);
  --color-ash: oklch(55% 0 0);
  --color-mist: oklch(92% 0 0);
  --color-bg: oklch(96% 0.005 350);

  /* Accent - Vibrant Magenta/Rose (original) */
  --color-accent: oklch(60% 0.25 350);
  --color-accent-hover: oklch(52% 0.25 350);
  --color-accent-dim: oklch(60% 0.25 350 / 0.15);
  --color-accent-soft: oklch(60% 0.25 350 / 0.25);

  /* Framework category colors - Light mode */
  --cat-create-bg: #fdf2f8;
  --cat-create-border: #ec4899;
  --cat-create-text: #be185d;

  --cat-evaluate-bg: #fdf4ff;
  --cat-evaluate-border: #d946ef;
  --cat-evaluate-text: #a21caf;

  --cat-refine-bg: #eff6ff;
  --cat-refine-border: #3b82f6;
  --cat-refine-text: #1d4ed8;

  --cat-simplify-bg: #fffbeb;
  --cat-simplify-border: #f59e0b;
  --cat-simplify-text: #b45309;

  --cat-harden-bg: #f0fdf4;
  --cat-harden-border: #22c55e;
  --cat-harden-text: #15803d;

  --cat-system-bg: #f5f5f4;
  --cat-system-border: #78716c;
  --cat-system-text: #44403c;
}