/* ================================================================
   Flourish Design Tokens
   ----------------------------------------------------------------
   Single source of truth for spacing, radius, shadow, motion, and
   z-index. Color tokens (--sage, --terracotta, --cream, etc.) live
   in each surface's existing inline :root for now and will be
   migrated here in Phase 2. This file is purely additive.
   ================================================================ */
:root {
  /* Spacing — 4 / 8 pt scale */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* Shadows — warm, low-contrast to match the editorial brand */
  --shadow-xs: 0 1px 2px rgba(60, 45, 35, 0.04);
  --shadow-sm: 0 2px 6px rgba(60, 45, 35, 0.06);
  --shadow-md: 0 4px 16px rgba(60, 45, 35, 0.08);
  --shadow-lg: 0 12px 32px rgba(60, 45, 35, 0.10);
  --shadow-xl: 0 24px 56px rgba(60, 45, 35, 0.14);

  /* Motion */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index layers — keep these globally unique */
  --z-base:       1;
  --z-sticky:     10;
  --z-banner:     50;
  --z-dropdown:   60;
  --z-backdrop:   80;
  --z-drawer:     90;
  --z-modal:      100;
  --z-toast:      110;
  --z-tooltip:    120;

  /* Focus ring — accessible at AA against cream + white */
  --focus-ring-color: rgba(122, 158, 126, 0.55);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Mobile shell heights */
  --mobile-topbar-h:    56px;
  --mobile-bottomnav-h: 64px;
}