/* OJBP — Spacing & Layout Tokens */

:root {
  /* ── Base spacing scale (4px grid) ── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */

  /* ── Layout ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --container-padding: var(--space-8);
  --section-gap:       var(--space-24);

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.16);
  --shadow-teal: 0 4px 24px rgba(15,182,148,0.25);

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-inout:cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast:   150ms; /* @kind other */
  --duration-base:   250ms; /* @kind other */
  --duration-slow:   400ms; /* @kind other */
}