/* ═══════════════════════════════════════════════════════════
   SPACING, GRID, RADII, SHADOWS — Bureau Arvö
   An architectural 4px base. Sparse, structural, hairline-led.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (4px base) ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Layout rhythm (fluid) ──────────────────────────────── */
  --page-margin:  clamp(1.5rem, 5vw, 6rem);   /* left/right gutter */
  --section-gap:  clamp(3rem, 6vw, 5rem);      /* vertical between sections */
  --grid-gap:     clamp(1.5rem, 3vw, 3rem);    /* between grid columns */
  --element-gap:  clamp(1rem, 2vw, 2rem);      /* between stacked elements */

  /* ── Grid ───────────────────────────────────────────────── */
  --grid-columns: 12;     /* @kind other */
  --content-max:  1440px; /* @kind spacing */ /* max page width */
  --measure:      52ch;    /* @kind other */ /* ideal reading measure */
  --measure-tight:40ch;    /* @kind other */

  /* ── Radii — minimal, architectural (paper has square corners) */
  --radius-none: 0px;
  --radius-xs:   2px;  /* code blocks, chips */
  --radius-sm:   4px;  /* buttons, inputs */
  --radius-md:   6px;  /* raised cards (used sparingly) */
  --radius-pill: 999px;

  /* ── Borders ────────────────────────────────────────────── */
  --border-width:        1px; /* @kind spacing */
  --border-width-accent: 2px; /* @kind spacing */ /* left rule on quotes / formula blocks */

  /* ── Shadows — almost none; paper is flat. Lift only on hover. */
  --shadow-none:  none;
  --shadow-card:  0 1px 2px rgba(43, 38, 30, 0.03);
  --shadow-lift:  0 12px 40px rgba(43, 38, 30, 0.06);
  --shadow-ink:   0 10px 30px rgba(0, 0, 0, 0.10); /* dark formula blocks */

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */ /* primary — calm, settling */
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:   0.18s; /* @kind other */
  --dur-base:   0.35s; /* @kind other */
  --dur-slow:   0.6s;  /* @kind other */

  /* ── Z-index ────────────────────────────────────────────── */
  --z-nav:    100; /* @kind other */
  --z-overlay:200; /* @kind other */
  --z-modal:  300; /* @kind other */
}