/* 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 subtle grey fill (reinforces non-interactivity, instead of fading the whole control with opacity). */
  --l-form-control-disabled-background: var(--l-color-bg-disabled);
  /* Border color of a disabled text control. */
  --l-form-control-disabled-border: var(--l-color-border-disabled);
  /* Value/placeholder text color of a disabled text control. */
  --l-form-control-disabled-color: var(--l-color-text-disabled);
  /* 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);
}