/* ============================================================
   LODE Strength — Spacing, radius, shadow, motion
   4-point base grid. iOS-native rounding & soft shadows;
   colored glow shadows for the dark brand surfaces.
   ============================================================ */

:root {
  /* Spacing (4pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Screen gutter (iOS standard 16, marketing 20) */
  --gutter: 16px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;     /* logo plate radius, small chips */
  --r-md: 12px;    /* buttons, fields */
  --r-lg: 16px;    /* content cards */
  --r-xl: 22px;    /* large cards, sheets */
  --r-2xl: 28px;
  --r-pill: 999px; /* filter chips, primary CTAs */

  /* Shadows — light theme (iOS soft) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.18);

  /* Glows — dark theme accents (category-tinted borders/halos) */
  --glow-green: 0 0 0 1px rgba(52,199,89,0.45), 0 0 22px rgba(52,199,89,0.18);
  --glow-amber: 0 0 0 1px rgba(245,166,35,0.45), 0 0 22px rgba(245,166,35,0.18);
  --glow-red:   0 0 0 1px rgba(255,69,58,0.45),  0 0 22px rgba(255,69,58,0.18);
  --glow-blue-ring: 0 0 0 1px rgba(46,139,255,0.55), 0 0 26px rgba(28,107,255,0.40);

  /* Motion — iOS spring-ish; quick, no bounce on UI, light fades */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);    /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */

  /* Press feedback */
  --press-scale: 0.96;   /* @kind other */
}