/* Spacing, radius and control tokens (AI Eh By app-ui "Spacing tokens"): the one definition for the
   app (index.html and its Tailwind theme) and the secondary pages (privacy, terms, delete-account,
   auth action). Every padding, margin, gap, inset and radius uses these; nothing else.

   Values are the standard's, in rem: 1rem is 16px, so --space-1 is 4px, --radius 18px and so on. rem
   keeps the app's existing scale-up: on a touch screen in landscape at 1024px and wider (an iPad on
   the table) and on mouse screens 1600px and wider, index.html raises the root font size, and
   spacing grows with the type. Inside the storyboard-exact screens (.sk-px and the *-px classes)
   the same tokens are pinned to px so those screens match their figures at any root size. */
:root {
  --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 */
  --radius: 1.125rem;  /* 18px */
  --radius-sm: 0.75rem;/* 12px */
  --control-h: 3rem;            /* 48px: min height of inputs, selects, buttons */
  --control-pad-y: 0.75rem;     /* 12px: inputs, selects, buttons */
  --control-pad-x: 1rem;        /* 16px */
  --select-arrow-space: 2.75rem;/* 44px: room on the right of a select for its arrow */
  --card-pad: 1.25rem;          /* 20px */
  --item-pad-y: 0.875rem;       /* 14px: list items */
  --item-pad-x: 1rem;           /* 16px */
  --cell-pad-y: 0.625rem;       /* 10px: table cells */
  --cell-pad-x: 0.875rem;       /* 14px */
  /* Page side padding. The standard's reference value is 20px; its layout rules set the gutter per
     size class (compact 16, medium 24, expanded 32), in px, and that is what ships. */
  --gutter: 16px;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* Storyboard-exact screens: the same tokens in px. */
:where(.sk-px, .sk-row-px, .sk-chip-px, .sk-btn-px, .sk-eyebrow-px) {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius: 18px; --radius-sm: 12px;
  --control-h: 48px; --control-pad-y: 12px; --control-pad-x: 16px; --select-arrow-space: 44px;
  --card-pad: 20px; --item-pad-y: 14px; --item-pad-x: 16px; --cell-pad-y: 10px; --cell-pad-x: 14px;
}