/* GCMD Library — Spacing & layout tokens */

:root {
  /* ── Spacing scale (4-px base) ──────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout containers ──────────────────────────────────── */
  --container-max:      1280px;
  --container-narrow:   800px;
  --container-padding:  var(--space-6);
  --sidebar-width:      280px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-none:  0;       /* an explicit reset: the corners a card shares with a band above it */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;
  /* Semantic radii (PLAN-DESIGN-ROLLOUT-2026-09 L1). Flag off they resolve to
     today's values; html.rr-theme (tokens/reading-room.css) makes them the
     Reading Room's pill / 16px / 12px. Components migrate onto these in Layer
     2, because --radius-md is on both buttons and cards and cannot be flipped
     for one without the other. */
  --radius-control: var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-media:   var(--radius-md);

  /* ── Breakpoints (reference values; use @media manually) ─ */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* ── Heights ────────────────────────────────────────────── */
  --header-height:        64px;
  --header-height-mobile: 56px;
  --bottom-nav-height:    60px;
}