/* Luxen form component tokens — --l-form-control-* (control appearance) and
   --l-form-field-* (field layout). Each references a semantic alias, so dark
   mode and theming are inherited. Consumed by the form control CSS
   (checkbox, radio, switch, input, …) and the `l-form-field` wrapper.
*/

/* Luxen design-tokens — form component tokens.
   Opt-in via `@import "luxen-ui/css/tokens/forms"` (already bundled in the
   Luxen preset). Reference semantic aliases, so dark mode is inherited. */

:root {
  /* Color of a control when activated (checked checkbox, selected radio, on switch). Form-wide accent, akin to native `accent-color`. A stable, saturated color that does not invert between light and dark, so the baked white glyph stays legible in both modes — override per brand. */
  --l-form-control-activated-color: var(--l-color-blue-600);
  /* Color of the glyph on the activated fill (checkmark, radio dot, switch thumb). Pairs with the stable accent. */
  --l-form-control-activated-content-color: var(--l-color-white);
  /* Control background (input, textarea, select, unchecked toggle box). */
  --l-form-control-background-color: var(--l-color-surface);
  /* Color of the user-entered value text. */
  --l-form-control-value-color: var(--l-color-text-primary);
  /* Placeholder text color. */
  --l-form-control-placeholder-color: var(--l-color-text-tertiary);
  /* Control border color. */
  --l-form-control-border-color: var(--l-color-border);
  /* Control border width. */
  --l-form-control-border-width: 1px;
  /* Control border radius. */
  --l-form-control-border-radius: var(--l-radius-md);
  /* Control border color on hover. */
  --l-form-control-border-color-hover: var(--l-color-text-tertiary);
  /* Control border color when invalid. */
  --l-form-control-border-color-invalid: var(--l-color-bg-fill-danger-strong);
  /* Background of a disabled text control — a faint ink wash (reinforces non-interactivity, instead of fading the whole control with opacity). Translucent rather than a solid grey so it composites onto whatever sits behind: a disabled field reads the same on a card, an alert, or a dialog, where an opaque fill would show as a mismatched patch. On the default surface it lands within a step of the former solid --l-color-bg-disabled, in both light and dark. */
  --l-form-control-disabled-background: color-mix(in oklab, var(--l-color-text-primary) 6%, transparent);
  /* Border color of a disabled text control. Translucent for the same reason as --l-form-control-disabled-background, and derived from the same ink so fill and border stay in step under any theme. 20% is the alpha that reproduces the former solid --l-color-border-disabled on the default surface in both modes; 25% (the CSSWG default-UA proposal) drifts bright enough in dark mode to read as an enabled border. */
  --l-form-control-disabled-border: color-mix(in oklab, var(--l-color-text-primary) 20%, transparent);
  /* Value/placeholder text color of a disabled text control. Deliberately opaque, unlike the fill and border: text is the one layer that must not composite. An ink-derived alpha assumes the backdrop luminance matches the color scheme, so on a dark card in light mode a translucent value would fade dark-on-dark to nothing — a solid grey stays legible either way. */
  --l-form-control-disabled-color: var(--l-color-text-disabled);
  /* Mark on a disabled control that greys out through tokens rather than fading — currently the switch's thumb when it is off and disabled, sitting on the pale --l-form-control-disabled-background. A mid grey that holds in both light and dark, so the mark keeps past 3:1 against that fill either way; the lighter --l-form-control-disabled-color would drop below it. Decoupled from text tokens for the same reason as --l-form-control-track-off-color. Activated controls (checked checkbox, selected radio, on switch) do not use this — they fade instead, keeping their accent tint. */
  --l-form-control-disabled-mark-color: var(--l-color-gray-500);
  /* Box size of toggle controls (checkbox, radio, switch). Relative to font size so it scales with the label. */
  --l-form-control-toggle-size: 1.25em;
  /* Thickness of the hover halo ring on toggle controls (checkbox, radio, switch), as a fraction of the toggle size. Single source for the shared toggle hover language. */
  --l-form-control-toggle-halo-ratio: 0.22;
  /* Off-state track fill of the switch. A mid grey that holds in both light and dark so the white thumb keeps ~5:1 contrast either way — decoupled from text tokens so re-theming body text never moves the track. */
  --l-form-control-track-off-color: var(--l-color-gray-500);
  /* Height of text controls (input, select, textarea). */
  --l-form-control-height: var(--l-size-control-md);
  /* Horizontal padding of text controls. */
  --l-form-control-padding-inline: var(--l-spacing-3);
  /* Field label color. */
  --l-form-control-label-color: var(--l-color-text-primary);
  /* Helper/description text color (`l-hint`). */
  --l-form-control-hint-color: var(--l-color-text-secondary);
  /* Error message text color (`l-error`). */
  --l-form-control-error-color: var(--l-color-text-danger);
  /* Marker appended to a required field's label. */
  --l-form-control-required-content: '*';
  /* Color of the required marker. */
  --l-form-control-required-color: var(--l-color-text-danger);
  /* Vertical gap between label, control, and messages in a stacked field. Tight, so the label and helper text sit close to the control. */
  --l-form-field-gap: var(--l-spacing-1);
  /* Horizontal gap between a toggle control and its label in an inline field. */
  --l-form-field-choice-gap: var(--l-spacing-2);
}