/* ============================================================
   SPACING, RADII, SHADOWS, LAYOUT — Johnson Team / CCM
   ------------------------------------------------------------
   The CCM system is flat and architectural: SHARP-to-soft corners
   (inputs & cards sit at 2–4px, never pill-rounded except avatars,
   social chips and badges which are full circles), restrained
   shadows, and a generous 8px-based spacing rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --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;
  --space-13: 128px;

  /* ---- Radii — CCM corners are crisp ---- */
  --radius-none: 0;
  --radius-xs:   2px;   /* inputs, default UI */
  --radius-sm:   4px;   /* buttons, cards */
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px; /* chips/tags occasionally */
  --radius-circle: 50%; /* avatars, social, badges */

  /* ---- Shadows — used sparingly, soft & low ---- */
  --shadow-none: none;
  --shadow-xs:  0 1px 2px rgba(35,31,32,0.06);
  --shadow-sm:  0 2px 6px rgba(35,31,32,0.08);
  --shadow-md:  0 6px 18px rgba(35,31,32,0.10);
  --shadow-lg:  0 16px 40px rgba(35,31,32,0.14);
  --shadow-pop: 0 24px 60px rgba(35,31,32,0.20);
  --shadow-focus: 0 0 0 3px rgba(72,129,120,0.35);  /* green ring */
  --shadow-focus-blue: 0 0 0 3px rgba(47,138,231,0.35);

  /* ---- Borders ---- */
  --border-width:    1px;
  --border-width-2:  2px;
  --border-width-3:  3px;

  /* ---- Layout ---- */
  --container-sm: 720px; /* @kind spacing */
  --container-md: 960px; /* @kind spacing */
  --container-lg: 1200px; /* @kind spacing */
  --container-xl: 1320px; /* @kind spacing */
  --gutter:       24px;
  --section-y:    var(--space-12);

  /* ---- Control sizing (buttons, inputs) ---- */
  --control-h-sm: 36px;
  --control-h-md: 44px;   /* default — meets 44px touch target */
  --control-h-lg: 54px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      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 */

  /* ---- Z-index ---- */
  --z-base:    1; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:   1100; /* @kind other */
  --z-toast:   1200; /* @kind other */
}