/* ── ArbiBase Spacing Tokens ─────────────────────────────────
   Fixed scale based on 4px base unit.
   Container max-width and section padding also defined here.
   ─────────────────────────────────────────────────────────── */

:root {
  /* ── Base spacing scale ──────────────────── */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28: 112px;
  --space-32: 128px;

  /* ── Layout ──────────────────────────────── */
  --container:    1200px;       /* default max content width */
  --container-lg: 1400px;       /* wide variant */
  --pad:          24px;         /* horizontal page padding */

  /* ── Component sizing ────────────────────── */
  --nav-height:  56px;
  --radius-none: 0px;           /* ArbiBase uses square/sharp edges on most UI */
  --radius-sm:   4px;           /* small rounding, used sparingly */
  --radius-md:   8px;           /* cards in mockup widget only */
  --radius-full: 9999px;        /* pills, avatars */

  /* ── Border widths ───────────────────────── */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-accent: 3px;         /* brand left-border on blockquotes */
}

/* ── Layout utilities ─────────────────────── */
.c {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.container {
  width: 90%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 1rem;
}

.sec {
  padding: 56px 0;
  position: relative;
}
.sec--alt { background: var(--bg-raised); }
.sec--bordered { border-bottom: 1px solid var(--line); }