/*
 * Spacing & Form Control Tokens
 *
 * One 4px grid, named by quarter-rem step: --sigvelo-spacing-3 is 3 × 0.25rem
 * = 12px. The scale is dense through the range components actually lay out in
 * and thins out above 48px, where sizing becomes layout rather than spacing.
 *
 * Every control height and gap in this file resolves to a step on that grid.
 * If a value you need is not on the scale, that is the signal to reconsider the
 * value rather than to write the number: audit:css-recipes rejects off-grid
 * lengths in component spacing.
 */

:root {
  /* Spacing scale */
  --sigvelo-spacing-0-5: 0.125rem; /* 2px */
  --sigvelo-spacing-1: 0.25rem; /* 4px */
  --sigvelo-spacing-1-5: 0.375rem; /* 6px */
  --sigvelo-spacing-2: 0.5rem; /* 8px */
  --sigvelo-spacing-2-5: 0.625rem; /* 10px */
  --sigvelo-spacing-3: 0.75rem; /* 12px */
  --sigvelo-spacing-3-5: 0.875rem; /* 14px */
  --sigvelo-spacing-4: 1rem; /* 16px */
  --sigvelo-spacing-5: 1.25rem; /* 20px */
  --sigvelo-spacing-6: 1.5rem; /* 24px */
  --sigvelo-spacing-7: 1.75rem; /* 28px */
  --sigvelo-spacing-8: 2rem; /* 32px */
  --sigvelo-spacing-9: 2.25rem; /* 36px */
  --sigvelo-spacing-10: 2.5rem; /* 40px */
  --sigvelo-spacing-11: 2.75rem; /* 44px */
  --sigvelo-spacing-12: 3rem; /* 48px */
  --sigvelo-spacing-14: 3.5rem; /* 56px */
  --sigvelo-spacing-16: 4rem; /* 64px */
  --sigvelo-spacing-20: 5rem; /* 80px */
  --sigvelo-spacing-24: 6rem; /* 96px */

  /* Form control heights per size. Expressed on the spacing scale so a panel,
     a gap, or a reserved gutter can line up with a control by name. */
  --sigvelo-control-height-xs: var(--sigvelo-spacing-7); /* 28px */
  --sigvelo-control-height-sm: var(--sigvelo-spacing-8); /* 32px */
  --sigvelo-control-height-md: var(--sigvelo-spacing-9); /* 36px */
  --sigvelo-control-height-lg: var(--sigvelo-spacing-10); /* 40px */
  --sigvelo-control-height-xl: var(--sigvelo-spacing-11); /* 44px */

  /* Form control font sizes per size */
  --sigvelo-control-text-xs: 0.75rem;
  --sigvelo-control-text-sm: 0.8125rem;
  --sigvelo-control-text-md: 0.875rem;
  --sigvelo-control-text-lg: 0.875rem;
  --sigvelo-control-text-xl: 0.875rem;

  /* The leading that belongs to each of those sizes, from the type ramp's
     whole-pixel partners. A ratio applied to a size that is itself a variable
     lands on fractions — 13px at 1.25 is 16.25px — and a stack of rows then
     drifts off the 4px grid a quarter pixel at a time. Every one of these fits
     inside the matching control height with room to spare, so a control keeps
     its box and gains a predictable baseline. */
  --sigvelo-control-line-height-xs: var(--sigvelo-text-xs-leading); /* 16px */
  --sigvelo-control-line-height-sm: var(--sigvelo-text-compact-leading); /* 18px */
  --sigvelo-control-line-height-md: var(--sigvelo-text-sm-leading); /* 20px */
  --sigvelo-control-line-height-lg: var(--sigvelo-text-sm-leading); /* 20px */
  --sigvelo-control-line-height-xl: var(--sigvelo-text-sm-leading); /* 20px */

  /* Canonical control geometry derived from the public size scale. */
  --sigvelo-control-padding-inline-xs: var(--sigvelo-spacing-2);
  --sigvelo-control-padding-inline-sm: var(--sigvelo-spacing-2-5);
  --sigvelo-control-padding-inline-md: var(--sigvelo-spacing-3);
  --sigvelo-control-padding-inline-lg: var(--sigvelo-spacing-4);
  --sigvelo-control-padding-inline-xl: var(--sigvelo-spacing-4);

  /* Icons ride the type ramp rather than a scale of their own: a glyph beside
     a label should be the size of the label, not a nearby round number. */
  --sigvelo-control-icon-size-xs: var(--sigvelo-text-xs); /* 12px */
  --sigvelo-control-icon-size-sm: var(--sigvelo-text-sm); /* 14px */
  --sigvelo-control-icon-size-md: var(--sigvelo-text-base); /* 16px */
  --sigvelo-control-icon-size-lg: var(--sigvelo-text-lg); /* 18px */
  --sigvelo-control-icon-size-xl: var(--sigvelo-text-xl); /* 20px */

  /* Compact application density. Product chrome and shared recipes resolve
     through these aliases so density can be tuned in one place. */
  --sigvelo-density-compact-control-height: var(--sigvelo-control-height-sm);
  --sigvelo-density-compact-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
  --sigvelo-density-compact-control-font-size: var(--sigvelo-control-text-sm);
  --sigvelo-density-compact-control-line-height: var(--sigvelo-control-line-height-sm);
  --sigvelo-density-compact-control-icon-size: var(--sigvelo-control-icon-size-sm);
  --sigvelo-density-compact-control-gap: var(--sigvelo-spacing-1-5);

  /* Form control misc */
  --sigvelo-control-placeholder-color: color-mix(
    in oklab,
    var(--sigvelo-color-text-muted),
    transparent 25%
  );
}