/* ============================================================
   NEXHA HAIRTECH — SPACING, SIZING & RADIUS TOKENS
   8px base grid. Sharp corners are the brand default — radius
   is minimal and used sparingly.
   ============================================================ */

:root {
  /* --- Spacing scale (8px base) --- */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  2.5rem;   /* 40 */
  --sp-8:  3rem;     /* 48 */
  --sp-9:  4rem;     /* 64 */
  --sp-10: 5rem;     /* 80 */
  --sp-11: 6rem;     /* 96 */
  --sp-12: 8rem;     /* 128 */

  /* --- Radius — the brand is angular. Default to sharp. --- */
  --r-none: 0px;
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   4px;
  --r-lg:   6px;
  --r-pill: 999px;   /* tags / status only */
  --r-default: var(--r-none);

  /* --- Border widths --- */
  --bw-hair: 1px; /* @kind other */
  --bw-thin: 1.5px; /* @kind other */
  --bw-thick: 2px; /* @kind other */
  --bw-rule: 1px;     /* @kind other */

  /* --- Layout --- */
  --container-max: 1280px;
  --container-wide: 1600px;
  --gutter: var(--sp-6);
  --page-margin: var(--sp-9);

  /* --- Control sizing --- */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --tap-min: 44px;

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