/*
 * TKAWEN Brand · Spacing & layout tokens
 *
 * 4px base unit — every dimension across every TKAWEN product app must
 * snap to a multiple of 4. The scale below covers >99% of practical use.
 */

:root {
  /* ═══════════════ BASE UNIT ═══════════════ */
  --tkw-unit: 4px;          /* the atom */

  /* ═══════════════ SPACING SCALE ═══════════════ */
  /* Geometric pattern (×1, ×2, ×3, ×4, ×6, ×8, ×12, ×16, ×24, ×32)            */
  /* — small steps where micro-decisions happen, large steps for sections.    */
  --tkw-space-0:   0;
  --tkw-space-px:  1px;
  --tkw-space-0_5: 2px;
  --tkw-space-1:   4px;
  --tkw-space-2:   8px;
  --tkw-space-3:   12px;
  --tkw-space-4:   16px;
  --tkw-space-5:   20px;
  --tkw-space-6:   24px;
  --tkw-space-8:   32px;
  --tkw-space-10:  40px;
  --tkw-space-12:  48px;
  --tkw-space-16:  64px;
  --tkw-space-20:  80px;
  --tkw-space-24:  96px;
  --tkw-space-32:  128px;
  --tkw-space-40:  160px;
  --tkw-space-48:  192px;
  --tkw-space-56:  224px;
  --tkw-space-64:  256px;

  /* ═══════════════ RADIUS SCALE ═══════════════ */
  /* Mirror of mark's 25% corner ratio convention.                            */
  --tkw-radius-none: 0;
  --tkw-radius-xs:   2px;     /* tags, ticks */
  --tkw-radius-sm:   4px;     /* inputs, badges */
  --tkw-radius-md:   6px;     /* buttons */
  --tkw-radius-lg:   8px;     /* small cards */
  --tkw-radius-xl:   12px;    /* default cards */
  --tkw-radius-2xl:  16px;    /* dialogs */
  --tkw-radius-3xl:  24px;    /* heroes, sheet panels */
  --tkw-radius-4xl:  32px;    /* showcase tiles */
  --tkw-radius-full: 9999px;  /* pills, dots */

  /* ═══════════════ SHADOWS ═══════════════ */
  /* Layered slate-tinted shadows (NOT pure black — Apple convention).        */
  --tkw-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --tkw-shadow-sm: 0 2px 6px -2px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --tkw-shadow-md: 0 8px 16px -8px rgba(15,23,42,0.10), 0 2px 4px -1px rgba(15,23,42,0.06);
  --tkw-shadow-lg: 0 18px 32px -16px rgba(15,23,42,0.14), 0 4px 8px -2px rgba(15,23,42,0.06);
  --tkw-shadow-xl: 0 32px 64px -28px rgba(15,23,42,0.20), 0 8px 16px -4px rgba(15,23,42,0.06);
  --tkw-shadow-2xl: 0 48px 96px -32px rgba(15,23,42,0.32);

  /* Glow shadows (for primary actions, brand emphasis) */
  --tkw-shadow-glow-brand: 0 12px 28px -10px rgba(29,78,216,0.40);

  /* ═══════════════ Z-INDEX SCALE ═══════════════ */
  --tkw-z-base:     0;
  --tkw-z-raised:   10;
  --tkw-z-dropdown: 100;
  --tkw-z-sticky:   200;
  --tkw-z-fixed:    300;
  --tkw-z-modal:    400;
  --tkw-z-popover:  500;
  --tkw-z-toast:    600;
  --tkw-z-max:      999;

  /* ═══════════════ CONTAINER WIDTHS ═══════════════ */
  --tkw-container-prose: 65ch;     /* legible reading line length */
  --tkw-container-sm:    640px;
  --tkw-container-md:    768px;
  --tkw-container-lg:    1024px;
  --tkw-container-xl:    1280px;
  --tkw-container-2xl:   1440px;

  /* ═══════════════ MOTION ═══════════════ */
  --tkw-duration-instant: 75ms;
  --tkw-duration-fast:    150ms;
  --tkw-duration-normal:  250ms;
  --tkw-duration-slow:    400ms;
  --tkw-duration-slower:  600ms;

  --tkw-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* enter — strong start, soft end */
  --tkw-ease-in:     cubic-bezier(0.55, 0, 0.78, 0);     /* exit — soft start, strong end */
  --tkw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* both */
  --tkw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* bouncy, for delight */
}
