/* ==========================================================================
   NEO-BRUTALISM DESIGN TOKENS
   Dial settings (taste-skill): DESIGN_VARIANCE 8/10 · MOTION_INTENSITY 4/10 · VISUAL_DENSITY 4/10
   ========================================================================== */

:root,
[data-theme="concrete-acid"] {
  --color-bg: #edeae3;
  --color-surface: #ffffff;
  --color-ink: #14120f;
  --color-ink-soft: #4a463e;
  --color-accent: #d6ff3f;
  --color-accent-2: #ff3b30;
  --color-on-accent: #14120f;
}

[data-theme="classic-primary"] {
  --color-bg: #f5f5f0;
  --color-surface: #ffffff;
  --color-ink: #000000;
  --color-ink-soft: #45443f;
  --color-accent: #f7d000;
  --color-accent-2: #1c3ffd;
  --color-on-accent: #000000;
}

[data-theme="punk-paper"] {
  --color-bg: #f6efe4;
  --color-surface: #fffdf8;
  --color-ink: #1a1a1a;
  --color-accent: #e8175d;
  --color-accent-2: #ffb100;
  --color-on-accent: #fffdf8;
}

:root {
  /* Typography */
  --font-display: "Lexend Mega", sans-serif;
  --font-body: "Public Sans", sans-serif;
  --font-mono: "Space Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.5rem;
  --text-4xl: 5rem;
  --text-5xl: 7rem;

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* Shape */
  --border-width: 3px;
  --border-width-lg: 5px;
  --radius: 0px;

  /* Shadow (hard offset — no blur, ever) */
  --shadow-hard: 6px 6px 0 0 var(--color-ink);
  --shadow-hard-lg: 10px 10px 0 0 var(--color-ink);
  --shadow-hard-sm: 3px 3px 0 0 var(--color-ink);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-brutal: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  margin: 0;
}

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