/* ============================================================
   CRA Spacing, Radius, Border & Elevation Tokens
   Editorial document system: generous margins, hairline rules,
   restrained elevation. Corners are near-square — this is print
   language, not app UI.
   ============================================================ */
:root {
  /* --- Spacing scale (4px base) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* --- Document geometry (from the one-pager spec) --- */
  --page-margin-left:  0.7in;
  --page-margin-right: 0.6in;
  --stripe-width:      5px;   /* maroon left page stripe */
  --band-height:       118px; /* navy header band */
  --footer-height:     30px;  /* navy footer bar */
  --section-bar-w:     3px;   /* maroon section-header left bar */
  --section-bar-h:     14px;
  --bullet-size:       5px;   /* square maroon bullet */
  --bullet-alt-size:   6px;   /* round olive bullet */

  /* --- Radius — near-square, print-derived --- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Borders --- */
  --border-hair: 1px solid var(--divider);
  --border-rule: 0.5px solid var(--cra-cream);
  --accent-rule: 2px solid var(--accent);

  /* --- Elevation — subtle, warm-toned shadows --- */
  --shadow-sm: 0 1px 2px rgba(27, 42, 74, 0.06);
  --shadow-md: 0 4px 16px rgba(27, 42, 74, 0.08);
  --shadow-lg: 0 12px 40px rgba(27, 42, 74, 0.12);

  /* --- Motion — quiet, professional; short fades, no bounce --- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
}