/* ─── Brava Marketing — Spacing & Layout Tokens ─────────────────────────────── */

:root {
  /* ── Base Scale (4px base unit) ── */
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;

  /* ── Semantic Spacing ── */
  --gap-xs:     var(--space-2);
  --gap-sm:     var(--space-3);
  --gap-md:     var(--space-6);
  --gap-lg:     var(--space-8);
  --gap-xl:     var(--space-12);
  --gap-2xl:    var(--space-16);
  --gap-3xl:    var(--space-24);

  --section-padding-x:  var(--space-12);
  --section-padding-y:  var(--space-24);
  --container-max:      1280px;
  --container-md:       960px;
  --container-sm:       640px;

  /* ── Border Radius ── */
  --radius-none:   0px;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-pill:   999px;

  /* ── Brava uses sharp geometry by default — minimal rounding ── */
  --radius-default: var(--radius-sm);
  --radius-card:    var(--radius-md);
  --radius-button:  var(--radius-none);   /* Sharp-edged CTAs */
  --radius-input:   var(--radius-sm);
  --radius-badge:   var(--radius-none);

  /* ── Z-index layers ── */
  --z-base:     0; /* @kind other */
  --z-raised:   10; /* @kind other */
  --z-sticky:   100; /* @kind other */
  --z-overlay:  200; /* @kind other */
  --z-modal:    300; /* @kind other */
  --z-toast:    400; /* @kind other */
}