/* ================================
   🎨 Design Tokens
   Base theme variables for colors,
   typography, spacing, radii, shadows
   ================================ */

:root {
  /* Brand Colors */
  --brand-primary: #744B8D;
  --brand-primary-dark: #4a2e70;
  --brand-primary-light: #EDE6F4;  /* #a884c1; */
  --brand-accent: #d9c2e8;
	--brand-link: #eef5ff;
	--brand-field-bg: #f9f5fc;
  --brand-page-bg: #f9f7fb;
  --brand-table-odd: #e2e4ff;
  --brand-table-even: white;
  --brand-menu-bg: #F0EEF7;
	--card-bg: #fff;
  --highlight: #ff0000;

  /* Neutrals */
  --neutral-100: #ffffff;
  --neutral-200: #f8f6fa;
  --neutral-300: #e8e2f0;
  --neutral-400: #ccc2d6;
  --neutral-700: #5b485f;
  --neutral-900: #2b2030;

  /* Text */
  --text-main: var(--neutral-900);
  --text-muted: var(--neutral-700);
  --text-inverse: var(--neutral-100);

  /* Feedback */
  --success: #3ba372;
  --error: #d64545;
  --warning: #f0a202;
  --info: #4a90e2;

  /* Typography */
  --font-family-sans: "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "Courier New", monospace;

  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.2rem;   /* 20px */
  --font-size-xl: 1.5rem;    /* 24px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem;  /* 8px */
  --space-md: 1rem;    /* 16px */
  --space-lg: 1.5rem;  /* 24px */
  --space-xl: 2rem;    /* 32px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.2);
}