/**
 * 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 {
  /* Layout fallbacks for early paint */
  --content-size: 800px;
  --wide-size: 1400px;

  /* Semantic Color Tokens */
  --background: var(--color-bg-primary, #fff);
  --on-background: var(--color-text, #000);
  --overlay: var(--color-text, #000);
  --on-overlay: var(--color-text-inverse, #fff);

  /* Text and Typography Colors */
  --color-text: var(--black);
  --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: var(--color-white-alpha-900, rgb(255 255 255 / 90%));
  --color-overlay-light: var(--color-white-alpha-100, rgb(255 255 255 / 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;

}