/* wp-content/themes/flowsop/assets/css/tokens.css */
:root {
  --color-bg: #FFFDF5;
  --color-ink: #000000;
  --color-accent: #FF6B6B;
  --color-secondary: #FFD93D;
  --color-muted: #C4B5FD;
  --color-white: #FFFFFF;
  --color-success: var(--color-muted);
  --color-warning: var(--color-secondary);
  --color-danger: var(--color-accent);
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --max-width: 1200px;
  --shadow-sm: 4px 4px 0 0 var(--color-ink);
  --shadow-md: 8px 8px 0 0 var(--color-ink);
  --shadow-lg: 12px 12px 0 0 var(--color-ink);
  --grid-line: rgba(0,0,0,0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-display); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
.flowsop-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
.text-stroke { -webkit-text-stroke: 2px var(--color-ink); color: transparent; }
.rotate-1  { transform: rotate(1deg); }
.-rotate-1 { transform: rotate(-1deg); }
.-rotate-2 { transform: rotate(-2deg); }
.rotate-3  { transform: rotate(3deg); }
.page--grid {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

.page--grid .page--grid {
  background-color: transparent;
  background-image: none;
}