/* ============================================================
   ZeltenLabs — Spacing, radius, shadow, motion, layout
   Sharp & engineered: small radii, crisp 1px borders,
   low-diffusion shadows. 4px base grid.
   ============================================================ */

:root {
  /* ---- Spacing (4px base grid) ---- */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   8px;
  --space-4:   12px;
  --space-5:   16px;
  --space-6:   20px;
  --space-7:   24px;
  --space-8:   32px;
  --space-9:   40px;
  --space-10:  48px;
  --space-11:  64px;
  --space-12:  80px;
  --space-13:  96px;
  --space-14:  128px;

  /* ---- Radius — angular brand, kept small ---- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   3px;   /* default control radius */
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  18px;
  --radius-pill: 999px;
  --radius-control: var(--radius-sm);
  --radius-card:    var(--radius-md);

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

  /* ---- Shadows — tight, low-diffusion, cool ---- */
  --shadow-xs:  0 1px 2px rgba(14, 14, 16, 0.06);
  --shadow-sm:  0 1px 2px rgba(14, 14, 16, 0.08), 0 1px 1px rgba(14, 14, 16, 0.04);
  --shadow-md:  0 4px 10px -2px rgba(14, 14, 16, 0.10), 0 2px 4px -2px rgba(14, 14, 16, 0.06);
  --shadow-lg:  0 12px 28px -6px rgba(14, 14, 16, 0.16), 0 4px 8px -4px rgba(14, 14, 16, 0.08);
  --shadow-xl:  0 24px 56px -12px rgba(14, 14, 16, 0.24);
  --shadow-focus: 0 0 0 3px rgba(222, 58, 42, 0.30);
  --shadow-inset: inset 0 1px 2px rgba(14, 14, 16, 0.06);

  /* Red glow for inverse/brand surfaces */
  --shadow-brand: 0 8px 24px -6px rgba(200, 22, 11, 0.45);

  /* ---- Motion — quick, mechanical, minimal bounce ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --transition-control: color var(--dur-fast) var(--ease-out),
                        background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        box-shadow var(--dur-fast) var(--ease-out),
                        transform var(--dur-fast) var(--ease-out); /* @kind other */

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --sidebar-width: 248px;
  --topbar-height: 56px;

  /* ---- Z-index ---- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-dropdown: 400; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */

  /* ---- Signature brand gradients / textures ---- */
  --grad-red: linear-gradient(135deg, #de3a2a 0%, #c8160b 48%, #8c0a03 100%); /* @kind color */
  --grad-ink: linear-gradient(150deg, #232328 0%, #1a1a1e 60%, #0e0e10 100%); /* @kind color */
}