/* ============================================================
   Deckhaus — Spacing, Radii, Shadows, Motion, Layout
   4px base grid. Swiss precision: small radii, restrained shadows.
   ============================================================ */

:root {
  /* ---- Spacing (4px grid) ---- */
  --space-0:   0;
  --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;

  /* Layout rhythm */
  --gutter:        24px;
  --page-margin:   clamp(20px, 6vw, 96px);
  --section-y:     clamp(48px, 6.4vw, 104px); /* @kind spacing */
  --maxw-prose:    68ch;
  --maxw-content:  1280px;
  --maxw-wide:     1480px;

  /* ---- Radii (precise, modest) ---- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);

  /* ---- Borders ---- */
  --border-width: 1px;
  --hairline: 1px solid var(--border-subtle);

  /* ---- Shadows (subtle on dark; elevation via border) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 44px 100px rgba(0, 0, 0, 0.62);

  /* Accent glow + focus ring */
  /* Focus ring (accessibility only — no decorative glow) */
  --ring-focus:  0 0 0 3px rgba(183, 201, 74, 0.32);

  /* ---- Motion ---- */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  200ms; /* @kind other */
  --dur-slow:  360ms; /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* ---- Z-index ---- */
  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100; /* @kind other */
  --z-toast: 1200; /* @kind other */
}