/* Form & Interaction Tokens — shared across all Embark themes */
/* Canonical source: decksend/design-tokens/ — do not edit in other repos */
/* These tokens define form control styling. Import alongside foundation.css + theme file. */
/* For usage patterns and composition recipes, see forms-patterns.md */

:root {
  /* Control sizing */
  --control-height-sm: 32px;
  --control-height: 40px;
  --control-height-lg: 48px;
  --control-min-touch: 44px;
  --control-radius: 6px;

  /* Control colours — reference theme tokens */
  --control-bg: var(--bg-input, rgba(255,255,255,0.04));
  --control-border: var(--glass-border);
  --control-border-hover: var(--glass-hover-border);
  --control-border-focus: var(--accent-primary);
  --control-text: var(--text-primary);
  --control-placeholder: var(--text-muted);

  /* Focus ring — uses color-mix() for theme-aware transparency */
  --control-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
  --control-ring-width: 3px;
  --control-ring-offset: 0px;
  --control-inset-shadow: inset 0 1px 2px rgba(0,0,0,0.2);

  /* Disabled state */
  --control-disabled-opacity: 0.4;
  --control-disabled-cursor: not-allowed;

  /* Error state */
  --control-error-color: var(--status-destructive, #f87171);
  --control-error-bg: color-mix(in srgb, var(--status-destructive, #f87171) 8%, transparent);
  --control-error-border: color-mix(in srgb, var(--status-destructive, #f87171) 30%, transparent);

  /* Timing — 0.15s matches brand bible micro-interaction duration */
  --control-duration: 0.15s;
  --control-easing: var(--ease-out);

  /* Scrollbar */
  --scrollbar-width: 6px;
  --scrollbar-thumb: rgba(255,255,255,0.08);
  --scrollbar-thumb-hover: rgba(255,255,255,0.15);
  --scrollbar-track: transparent;

  /* Checkbox / Radio */
  --checkbox-size: 16px;
  --checkbox-radius: 4px;
  --checkbox-border: rgba(255,255,255,0.2);
  --checkbox-border-hover: rgba(255,255,255,0.35);
  --checkbox-bg: rgba(255,255,255,0.04);
  --checkbox-bg-hover: rgba(255,255,255,0.08);
  --checkbox-checked-bg: var(--accent-primary);
  --checkbox-checked-border: var(--accent-primary);

  /* Select chevron */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* Selection highlight */
  --selection-bg: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  --selection-color: var(--text-primary);

  /* Skeleton loading */
  --skeleton-from: rgba(255,255,255,0.04);
  --skeleton-via: rgba(255,255,255,0.08);
  --skeleton-to: rgba(255,255,255,0.04);
}