1/*
  2 * impeccable.style — design tokens + minimal reset
  3 *
  4 * Shared by every page on the site (landing + generated sub-pages).
  5 * Keep this file small and dependency-free.
  6 */
  7
  8/* ============================================
  9   MINIMAL CSS RESET
 10   ============================================ */
 11
 12*, *::before, *::after {
 13  box-sizing: border-box;
 14}
 15
 16* {
 17  margin: 0;
 18}
 19
 20img, picture, video, canvas, svg {
 21  display: block;
 22  max-width: 100%;
 23}
 24
 25button, input, textarea, select {
 26  font: inherit;
 27}
 28
 29/* ============================================
 30   DESIGN TOKENS
 31   ============================================ */
 32
 33:root {
 34  /* Typography */
 35  --font-display: 'Cormorant Garamond', Georgia, serif;
 36  --font-body: 'Instrument Sans', system-ui, sans-serif;
 37  --font-mono: 'Space Grotesk', monospace;
 38
 39  /* Spacing Scale */
 40  --spacing-xs: 8px;
 41  --spacing-sm: 16px;
 42  --spacing-md: 24px;
 43  --spacing-lg: 32px;
 44  --spacing-xl: 48px;
 45  --spacing-2xl: 80px;
 46  --spacing-3xl: 120px;
 47
 48  /* Width */
 49  --width-max: 1400px;
 50  --width-content: 900px;
 51
 52  /* Animation */
 53  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 54  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 55  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
 56  --duration-fast: 0.15s;
 57  --duration-base: 0.3s;
 58  --duration-slow: 0.6s;
 59  --duration-slower: 0.8s;
 60  --duration-slowest: 1.2s;
 61
 62  /* Core Colors - Light Mode */
 63  --color-ink: oklch(10% 0 0);
 64  --color-text: oklch(10% 0 0);
 65  --color-paper: oklch(98% 0 0);
 66  --color-cream: oklch(96% 0.005 350);
 67  --color-charcoal: oklch(25% 0 0);
 68  --color-ash: oklch(55% 0 0);
 69  --color-mist: oklch(92% 0 0);
 70  --color-bg: oklch(96% 0.005 350);
 71
 72  /* Accent - Vibrant Magenta/Rose (original) */
 73  --color-accent: oklch(60% 0.25 350);
 74  --color-accent-hover: oklch(52% 0.25 350);
 75  --color-accent-dim: oklch(60% 0.25 350 / 0.15);
 76  --color-accent-soft: oklch(60% 0.25 350 / 0.25);
 77
 78  /* Framework category colors - Light mode */
 79  --cat-create-bg: #fdf2f8;
 80  --cat-create-border: #ec4899;
 81  --cat-create-text: #be185d;
 82
 83  --cat-evaluate-bg: #fdf4ff;
 84  --cat-evaluate-border: #d946ef;
 85  --cat-evaluate-text: #a21caf;
 86
 87  --cat-refine-bg: #eff6ff;
 88  --cat-refine-border: #3b82f6;
 89  --cat-refine-text: #1d4ed8;
 90
 91  --cat-simplify-bg: #fffbeb;
 92  --cat-simplify-border: #f59e0b;
 93  --cat-simplify-text: #b45309;
 94
 95  --cat-harden-bg: #f0fdf4;
 96  --cat-harden-border: #22c55e;
 97  --cat-harden-text: #15803d;
 98
 99  --cat-system-bg: #f5f5f4;
100  --cat-system-border: #78716c;
101  --cat-system-text: #44403c;
102}