/* Design tokens — see ../../../design/direction.md for the reasoning behind these values.
   Brycks is a monochrome brand: the logo is a white wordmark on near-black. There is no
   colour accent; emphasis comes from contrast and weight instead. */

:root {
  /* Colour */
  --color-bg: #0A0A0A;
  --color-surface: #121212;
  --color-fg: #FAFAFA;
  --color-muted: #9B9B9B;
  --color-border: #262626;

  /* Interactive — inverted rather than accented */
  --color-action-bg: #FAFAFA;
  --color-action-fg: #0A0A0A;
  --color-action-bg-hover: #D6D6D6;
  --color-focus: #FAFAFA;

  /* Typography — system stack for now; a self-hosted geometric sans replaces this
     when the type direction is locked (see direction.md, "Open vragen"). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* Spacing — 4px scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 68rem;
  --container-pad: var(--space-6);
  --measure: 60ch;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 180ms;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-8);
  }
}