/**
 * karm.dev — Spacing, radius, shadows, transitions, z-index
 * Load after colors_and_type.css
 */

:root {
  /* ==================================================
     SPACING — 4px base scale
     ================================================== */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */

  /* Legacy/semantic aliases */
  --spacing-xs:  var(--space-1);
  --spacing-sm:  var(--space-2);
  --spacing-md:  var(--space-4);
  --spacing-lg:  var(--space-6);
  --spacing-xl:  var(--space-8);
  --spacing-2xl: var(--space-12);
  --spacing-3xl: var(--space-16);

  /* Component padding patterns */
  --padding-card: var(--space-8);
  --padding-section: var(--space-12);
  --padding-button: var(--space-4) var(--space-8);

  /* ==================================================
     RADIUS
     ================================================== */
  --radius-sm:   4px;    /* tags, small inline */
  --radius-md:   8px;    /* inputs, small cards */
  --radius-lg:   12px;   /* cards, buttons */
  --radius-xl:   16px;   /* hero cards */
  --radius-full: 9999px; /* pills, avatars */

  /* ==================================================
     SHADOW — neutral elevation, subtle
     ================================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.15);

  /* ==================================================
     TRANSITIONS
     ================================================== */
  --dur-fast:   0.2s;
  --dur-normal: 0.3s;
  --dur-slow:   0.5s;
  --ease: ease-in-out;

  --transition-fast:   var(--dur-fast) var(--ease);
  --transition-normal: var(--dur-normal) var(--ease);
  --transition-slow:   var(--dur-slow) var(--ease);

  /* ==================================================
     Z-INDEX SCALE
     ================================================== */
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-fixed:         300;
  --z-modal-back:    400;
  --z-modal:         500;
  --z-tooltip:       600;
}

/* ==================================================
   KEYFRAMES — reused across components
   ================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-fade-in     { animation: fadeIn var(--transition-normal) ease-out; }
.animate-fade-in-up  { animation: fadeInUp var(--transition-normal) ease-out; }
.animate-slide-in    { animation: slideIn var(--transition-normal) ease-out; }