/* =================================================================
   UXOVIA · SPACING & LAYOUT TOKENS
   4px grid. Section rhythm + container widths.
   ================================================================= */

:root {
  /* ─────────────────── Spacing (4px grid) ─────────────────── */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.5rem;    /* 24px */
  --s-6:  2rem;      /* 32px */
  --s-7:  3rem;      /* 48px */
  --s-8:  4rem;      /* 64px */
  --s-9:  6rem;      /* 96px */
  --s-10: 8rem;      /* 128px */
  --s-11: 10rem;     /* 160px */

  /* section rhythm */
  --section-y:       clamp(4rem, 10vw, 8rem); /* @kind spacing */

  /* ─────────────────── Radii ─────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* ─────────────────── Layout ───────────────────
     Bei 1280px fuellte der Inhalt auf einem 1440er-Bildschirm 89 % der
     Breite — nur 80px Rand je Seite, wodurch die Seite randlos wirkte.
     1152px lassen 144px Luft und damit erkennbar einen Satzspiegel. */
  /* Satzbreite nach dem Muster von scaletalk.ai: 1280 px Inhalt bei 32 px
     Rand. Der Inhalt steht damit deutlich weiter aussen als zuvor (1152 px
     bei bis zu 40 px Rand) und der Bildschirm wirkt ausgenutzt statt
     eingeschnuert. */
  --container:        1280px; /* @kind spacing */
  --container-narrow: 1088px; /* @kind spacing */
  --container-tight:  896px; /* @kind spacing */
  --gutter:           clamp(1.25rem, 3vw, 2rem); /* @kind spacing */

  /* z-index scale */
  --z-base:    0; /* @kind other */
  --z-raised:  10; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-nav:     500; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal:   1000; /* @kind other */
  --z-toast:   1200; /* @kind other */
}