/* HOW Design Studio — design tokens.
   Three colours only: black ground, white type, one shiny purple.
   No cream/paper chapters — the whole site runs on black. */

:root {
  /* ---- ground ---- */
  --color-bg: #000000;
  --color-surface: #0B0B0D;
  --color-surface-2: #141417;
  --color-line: #26262B;
  --color-line-soft: #161619;

  /* ---- type ---- */
  --color-ink: #FFFFFF;
  --color-ink-muted: rgba(255, 255, 255, 0.62);
  --color-ink-faint: rgba(255, 255, 255, 0.38);

  /* ---- brand: one purple, kept bright enough to read as lit rather than flat ---- */
  --color-accent: #A855F7;
  --color-accent-bright: #C084FC;
  --color-accent-deep: #7C3AED;
  --color-on-accent: #FFFFFF;
  --gradient-accent: linear-gradient(135deg, var(--color-accent-bright) 0%, var(--color-accent-deep) 100%);
  --glow-accent: 0 0 40px rgba(168, 85, 247, 0.35);
  --glow-accent-soft: 0 0 80px rgba(168, 85, 247, 0.18);

  /* ---- type scale ---- */
  --text-mono: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --text-h2: clamp(2.6rem, 1.2rem + 5.4vw, 6rem);
  --text-display: clamp(3.25rem, 1.2rem + 8.2vw, 9rem);

  /* ---- rhythm ---- */
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 4rem);
  --measure: 58ch;
  --maxw: 1600px;

  /* ---- motion ---- */
  --duration-fast: 160ms;
  --duration-normal: 520ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-sm: 4px;
  --radius: 6px;
  --grain-opacity: 0.05;
}

/* Film grain, generated rather than shipped, so pure black reads as lit. */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}