/* ==========================================================================
   MB STUDIO — SPACING, RADIUS, SHADOW & LAYOUT TOKENS
   Spacing values are the gaps/paddings observed across the brand-kit frames
   (4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64). Radii and shadows are taken
   from the badge / card / example components.
   ========================================================================== */

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

  /* one-off values seen in the kit */
  --space-badge-y: 4px;
  --space-badge-x: 10px;

  /* ---- Radius ---- */
  --radius-sm:   6px;   /* badges, tags, small chips */
  --radius-md:   8px;   /* inputs, buttons */
  --radius-lg:   12px;  /* combination cards */
  --radius-xl:   16px;  /* feature / example cards */
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ---- Borders (hairline inset used across the kit) ---- */
  --hairline-inset:       inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  --hairline-inset-faint: inset 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* ---- Elevation / shadow system ----
     Soft, magenta-tinted shadows. The kit itself leans on inset hairlines
     for flat cards; these are for raised/floating surfaces. */
  --shadow-xs: 0 1px 2px rgba(42, 0, 72, 0.06);
  --shadow-sm: 0 1px 3px rgba(42, 0, 72, 0.08), 0 1px 2px rgba(42, 0, 72, 0.06);
  --shadow-md: 0 4px 12px rgba(42, 0, 72, 0.10), 0 2px 4px rgba(42, 0, 72, 0.06);
  --shadow-lg: 0 12px 32px rgba(42, 0, 72, 0.14), 0 4px 8px rgba(42, 0, 72, 0.08);
  --shadow-xl: 0 24px 60px rgba(42, 0, 72, 0.20), 0 8px 16px rgba(42, 0, 72, 0.10);
  /* glow for primary CTAs on dark surfaces */
  --shadow-glow-magenta: 0 8px 28px rgba(169, 0, 114, 0.40);

  /* ---- Signature brand gradient (from the MB mark) ---- */
  --gradient-brand: linear-gradient(120deg, #7A1FE0 0%, #A90072 50%, #FF2FD0 100%); /* @kind other */
  --gradient-brand-soft: linear-gradient(120deg, #800080 0%, #A90072 100%); /* @kind other */
  --gradient-deep: linear-gradient(160deg, #2A0048 0%, #150024 100%); /* @kind other */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px; /* @kind other */
  --container-wide: 1440px; /* @kind other */
  --page-gutter: 64px; /* @kind spacing */
  --z-header: 100; /* @kind other */
  --z-overlay: 200; /* @kind other */
  --z-modal: 300; /* @kind other */
}