/* Theme-agnostic structural design tokens.
 *
 * Theme COLORS come from the theme registry (seeded by the design-system package) and are
 * applied as inline CSS custom properties by <ThemeProvider>. These
 * radius / sizing / component tokens are identical across themes, so they
 * ship once here under the `.lynx-zero` base class that <ThemeProvider> puts on
 * its host view; CSS inheritance propagates them to every descendant. A theme
 * may still override roundness via its `radius` field. */

.lynx-zero {
  /* ── Roundness (DaisyUI v5 contract) ── */
  --radius-selector: 8px;
  --radius-field: 8px;
  --radius-box: 16px;

  /* ── Base size units (DaisyUI v5 contract) ──
   * A theme's `sizes` ({ field, selector }) overrides these; <ThemeProvider>
   * re-derives the component dimensions below from them in JS. We deliberately
   * do NOT use `calc(var() * n)` in CSS — it's unproven in Lynx's runtime CSS
   * engine. Defaults below are base 4px × the per-token multiples shown. */
  --size-selector: 4px;
  --size-field: 4px;

  /* ── Field sizing scale (button / input / select) — field × 6/8/12/16 ── */
  --size-xs: 24px;
  --size-sm: 32px;
  --size-md: 48px;
  --size-lg: 64px;

  /* ── Text ramp (public <Text> / <Heading> sizes) ──
   * The xs→3xl scale the `text-*` utilities resolve to (the daisy preset maps
   * Tailwind's fontSize keys onto these vars). Literal px so they resolve on
   * the first paint, like every other structural token. Anchored on a 17px
   * base — the iOS HIG Body size, so bare <Text> (the default) reads as native
   * body — and stepped as an even ~1.2 modular scale (each step ≈1.17–1.21×).
   *
   * The controller's `fontScale` multiplies this ramp app-wide; <ThemeProvider>
   * re-emits the literals in JS (no `calc(var() * n)` — unproven in Lynx).
   * NOTE: keep in sync with FONT_DEFAULTS in theme/ThemeProvider.tsx. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 34px;

  /* ── Font sizes (control-internal: button / input / badge labels) ──
   * A separate axis from the text ramp above and deliberately NOT scaled with
   * it — control chrome stays fixed. Kept as independent literals (no
   * var→var indirection; unproven in Lynx) even though values mirror the ramp. */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 14px;
  --font-lg: 18px;

  /* ── Spacing ── */
  --padding-btn-xs: 8px;
  --padding-btn-sm: 12px;
  --padding-btn-md: 16px;
  --padding-btn-lg: 24px;
  --padding-box: 16px;
  --padding-box-compact: 8px;
  --gap-box: 8px;

  /* ── Borders ── */
  --border-btn: 1px;
  --border-card: 1px;

  /* ── Selector-driven sizes (checkbox / toggle / badge) — selector × the
   * multiples shown; <ThemeProvider> re-derives these from `sizes.selector`. ── */
  --checkbox-xs: 16px; /* ×4 */
  --checkbox-sm: 20px; /* ×5 */
  --checkbox-md: 24px; /* ×6 */
  --checkbox-lg: 32px; /* ×8 */
  --toggle-width-xs: 32px; /* ×8 */
  --toggle-width-sm: 40px; /* ×10 */
  --toggle-width-md: 48px; /* ×12 */
  --toggle-width-lg: 56px; /* ×14 */
  --toggle-height-xs: 24px; /* ×6 */
  --toggle-height-sm: 24px; /* ×6 */
  --toggle-height-md: 28px; /* ×7 */
  --toggle-height-lg: 32px; /* ×8 */
  --toggle-thumb-xs: 16px; /* ×4 */
  --toggle-thumb-sm: 16px; /* ×4 */
  --toggle-thumb-md: 20px; /* ×5 */
  --toggle-thumb-lg: 24px; /* ×6 */
  --badge-xs: 16px; /* ×4 */
  --badge-sm: 20px; /* ×5 */
  --badge-md: 24px; /* ×6 */
  --badge-lg: 32px; /* ×8 */
  --step-indicator: 32px;
  --progress-height: 8px;
  --modal-max-width: 400px;

  /* ── Opacity ── */
  --disabled-opacity: 0.5;
}