/**
 * Theme Semantic Tokens
 * 
 * Intermediary layer mapping primatives.css design tokens to semantic names.
 * This allows theme variants (light, dark, client-specific) to override
 * the entire theme by changing these token values.
 * 
 * Usage: forms.css, base.css, and other component styles reference these
 * semantic tokens instead of raw primatives, enabling single-file theme swaps.
 */

:root {
  /* Text and Typography Colors */
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-text-light: var(--color-neutral-700);
  --color-text-inverse: var(--white);

  /* Background Colors */
  --color-bg-primary: var(--white);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-input: var(--white);
  --color-bg-disabled: var(--color-neutral-100);
  --color-bg-hover: var(--color-neutral-100);

  /* Border and Divider Colors */
  --color-border: var(--color-neutral-300);
  --color-border-light: var(--color-neutral-200);
  --color-border-dark: var(--color-neutral-400);

  /* Interaction States */
  --color-focus: var(--color-information-600);
  --color-focus-ring: rgb(0 70 234 / 10%);

  /* Primary Action Colors */
  --color-primary: var(--color-information-600);
  --color-primary-hover: var(--color-information-700);
  --color-primary-active: var(--color-information-800);
  --color-primary-disabled: var(--color-information-400);

  /* Secondary Action Colors */
  --color-secondary: var(--color-neutral-600);
  --color-secondary-hover: var(--color-neutral-700);
  --color-secondary-active: var(--color-neutral-800);
  --color-secondary-disabled: var(--color-neutral-400);

  /* Status Colors */
  --color-success: var(--color-success-600);
  --color-success-light: var(--color-success-100);
  --color-success-dark: var(--color-success-800);

  --color-error: var(--color-error-500);
  --color-error-light: var(--color-error-100);
  --color-error-dark: var(--color-error-800);

  --color-warning: var(--color-warning-600);
  --color-warning-light: var(--color-warning-100);
  --color-warning-dark: var(--color-warning-800);

  --color-info: var(--color-information-600);
  --color-info-light: var(--color-information-100);
  --color-info-dark: var(--color-information-800);

  /* Overlay and Emphasis */
  --color-overlay: rgb(0 0 0 / 50%);
  --color-overlay-light: rgb(0 0 0 / 10%);

  /* Link Colors */
  --color-link: var(--color-information-600);
  --color-link-hover: var(--color-information-700);
  --color-link-visited: var(--color-information-800);

  /* Utility Colors */
  --color-white: var(--white);
  --color-black: var(--black);
  --color-transparent: transparent;
}