/* ───────────────────────────────────────────────────────────────────────── */
/*  VirtualLife AI Imagine — Spacing, Radius, Elevation & Motion              */
/*  4px base grid. Compact desktop-app rhythm.                                */
/* ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ══ Spacing scale — 4px base ════════════════════════════════════════ */
  --space-1: 0.25rem; /* 4px  — icon gaps, tight inline                    */
  --space-2: 0.5rem;  /* 8px  — default control gap, grid gap             */
  --space-3: 0.75rem; /* 12px — card inner padding, toolbar gap           */
  --space-4: 1rem;    /* 16px — card padding, form field gap, grid gap    */
  --space-6: 1.5rem;  /* 24px — card body padding, section spacing        */
  --space-8: 2rem;    /* 32px — page padding, large section spacing       */
  --space-12: 3rem;   /* 48px — between major page sections               */

  /* ══ Border radius ═══════════════════════════════════════════════════ */
  /* --radius-lg (0.625rem / 10px) is the shadcn default radius.           */
  --radius-sm: 0.375rem;  /* 6px  — chips, token previews, inline code     */
  --radius-md: 0.5rem;    /* 8px  — buttons, inputs, selects               */
  --radius-lg: 0.625rem;  /* 10px — DEFAULT (--radius), dialogs, tabs       */
  --radius-xl: 0.875rem;  /* 14px — cards, glass panels                    */
  --radius-2xl: 1rem;     /* 16px — content-area inset corner              */
  --radius-full: 9999px;  /* pills, switches, avatars, status dots         */
  --radius: var(--radius-lg);

  /* The signature content-area inset: only the top-left corner is rounded. */
  --radius-inset: 16px;

  /* ══ Elevation / shadow ══════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.15);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.15);
  --shadow-lg: 0 15px 40px -10px oklch(0 0 0 / 0.5);
  --shadow-xl: 0 20px 50px -8px oklch(0 0 0 / 0.6);

  /* ══ Glass / blur ════════════════════════════════════════════════════ */
  --blur-sm: 4px;   /* content cards (bg-card/10)                          */
  --blur-md: 12px;  /* toolbars, floating panels (bg-card/40)             */
  --blur-lg: 16px;  /* heavy sticky headers (bg-card/80)                  */

  /* ══ Motion — duration ═══════════════════════════════════════════════ */
  --duration-fast: 150ms;   /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow: 300ms;   /* @kind other */
  --duration-slower: 500ms; /* @kind other */

  /* ══ Motion — easing ═════════════════════════════════════════════════ */
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --easing-out: cubic-bezier(0, 0, 0.2, 1);        /* @kind other */
  --easing-in: cubic-bezier(0.4, 0, 1, 1);         /* @kind other */
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* ══ Z-index scale ═══════════════════════════════════════════════════ */
  --z-base: 0;       /* @kind other */
  --z-sticky: 50;    /* @kind other */
  --z-sidebar: 100;  /* @kind other */
  --z-overlay: 150;  /* @kind other */
  --z-dialog: 200;   /* @kind other */
  --z-toast: 250;    /* @kind other */
  --z-tooltip: 300;  /* @kind other */
}