/* monoline — design tokens
   One palette: black to white. Emphasis is created by contrast, not by hue. */

:root {
  /* Surfaces, from the page backwards */
  --ink:        #070707;
  --surface:    #0f0f10;
  --surface-2:  #161617;
  --surface-3:  #1e1e20;

  /* Hairlines. Borders are light-on-dark at very low alpha so they read as
     edges rather than as boxes. */
  --line:       rgba(255, 255, 255, 0.09);
  --line-soft:  rgba(255, 255, 255, 0.05);
  --line-loud:  rgba(255, 255, 255, 0.18);

  /* Text */
  --text:       #f5f5f4;
  --muted:      #8c8c8e;
  --faint:      #5a5a5c;

  /* The only two "colour" signals in the system */
  --solid:      #fafafa;   /* primary button fill */
  --on-solid:   #0a0a0a;
  --danger:     #ff6b6b;
  --good:       #6bdba0;

  /* Type */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.375rem;
  --t-xl:   2rem;
  --t-2xl:  3rem;
  --t-3xl:  clamp(2.75rem, 8vw, 5.25rem);

  /* Space — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Motion — short, decelerating, never bouncy */
  --ease: cubic-bezier(0.22, 0.75, 0.25, 1);
  --fast: 120ms var(--ease);
  --base: 200ms var(--ease);
  --slow: 420ms var(--ease);

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.35);
  --maxw: 1080px;
}

/* Light appearance is offered but secondary — dark is the product. */
[data-appearance='light'] {
  --ink:       #fbfbfa;
  --surface:   #ffffff;
  --surface-2: #f4f4f3;
  --surface-3: #ebebea;
  --line:      rgba(0, 0, 0, 0.10);
  --line-soft: rgba(0, 0, 0, 0.06);
  --line-loud: rgba(0, 0, 0, 0.22);
  --text:      #0d0d0d;
  --muted:     #6b6b6d;
  --faint:     #97979a;
  --solid:     #0d0d0d;
  --on-solid:  #fafafa;
  --shadow:    0 1px 2px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.08);
}

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