/* Space & layout.
   Brand layouts (p.68): margin = long edge of the canvas ÷ 25, then use one row
   (min) to two rows (max) as the margin. Content grid = 3, 6 or 12 columns.
   Product layouts use the Tailwind 4px step scale the desks are built on. */
:root{
  --space-0:0;
  --space-1:0.25rem;   /* 4  */
  --space-2:0.5rem;    /* 8  */
  --space-3:0.75rem;   /* 12 */
  --space-4:1rem;      /* 16 */
  --space-5:1.25rem;   /* 20 */
  --space-6:1.5rem;    /* 24 */
  --space-8:2rem;      /* 32 */
  --space-10:2.5rem;   /* 40 */
  --space-12:3rem;     /* 48 */
  --space-16:4rem;     /* 64 */
  --space-24:6rem;     /* 96 */

  /* Brand grid */
  --grid-divisor:25; /* @kind other */               /* long edge ÷ 25 = one row */
  --grid-margin-min:calc(100% / 25);
  --grid-margin-max:calc(200% / 25);
  --grid-columns:12; /* @kind other */               /* also valid: 3, 6 */
  --grid-gutter:var(--space-6);

  /* Logo placement (p.71): logo width ≥ 1/3 of one column */
  --logo-min-width-ratio:0.3333; /* @kind other */

  /* Product shell */
  --page-max-width:1200px;
  --sidebar-width:16rem;
  --sidebar-width-icon:3rem;
  --header-height:3.5rem;
  --page-padding:var(--space-6);
  --card-padding:1.5rem;           /* shadcn Card p-6 */
  --table-cell-padding:0.5rem;     /* shadcn Table p-2 */
}