/* Rooma Design System — Spacing & Geometry Tokens
 *
 * Spacing follows a 4px base grid.
 * Corner radius is used sparingly — 4px for pills/chips, 8–10px for cards.
 * No drop shadows anywhere in brand materials.
 */

:root {
  /* ── Spacing scale (4px base) ──────────────────────── */
  --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-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;

  /* ── Border radius ─────────────────────────────────── */
  --radius-xs:  4px;    /* Badges, pills, code tags   */
  --radius-sm:  6px;    /* Small buttons              */
  --radius-md:  8px;    /* Buttons, form inputs       */
  --radius-lg: 10px;    /* Cards, modals              */
  --radius-xl: 12px;    /* Large panels               */

  /* ── Border widths ─────────────────────────────────── */
  --border-width:       1px;
  --border-width-thick: 1.5px;   /* R-icon mark, focus rings */

  /* ── Gilt rule dimensions ──────────────────────────── */
  --gilt-rule-height:   1px;
  --gilt-rule-sm:      32px;    /* Eyebrow rules (small)    */
  --gilt-rule-md:      44px;    /* Hero eyebrow             */
  --gilt-rule-lg:      60px;    /* Section separators       */
  --gilt-rule-xl:      72px;    /* Document separators      */

  /* ── Component sizing ──────────────────────────────── */
  --btn-height-sm:  32px;
  --btn-height-md:  40px;
  --btn-height-lg:  48px;

  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;

  --avatar-sm:  24px;
  --avatar-md:  32px;
  --avatar-lg:  40px;
  --avatar-xl:  48px;
  --avatar-2xl: 64px;

  /* ── Layout ────────────────────────────────────────── */
  --sidebar-width:        220px;
  --sidebar-collapsed:     64px;
  --content-max-width:    780px;
  --section-padding-h:     80px;
  --section-padding-v:     88px;
}