:root {
  /* ======================================================================
     1. COLOR TOKENS — BRAND, NEUTRAL, SEMANTIC
     ====================================================================== */

  /* ---------------------------------------------------------------------
     Primary Scale
     --------------------------------------------------------------------- */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* ---------------------------------------------------------------------
     Secondary Scale
     --------------------------------------------------------------------- */
  --secondary-50: #fdf2f8;
  --secondary-100: #fce7f3;
  --secondary-200: #fbcfe8;
  --secondary-300: #f9a8d4;
  --secondary-400: #f472b6;
  --secondary-500: #ec4899;
  --secondary-600: #db2777;
  --secondary-700: #be185d;
  --secondary-800: #9d174d;
  --secondary-900: #831843;

  /* ---------------------------------------------------------------------
     Accent Scale
     --------------------------------------------------------------------- */
  --accent-50: #fffbeb;
  --accent-100: #fef3c7;
  --accent-200: #fde68a;
  --accent-300: #fcd34d;
  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  --accent-600: #d97706;
  --accent-700: #b45309;
  --accent-800: #92400e;
  --accent-900: #78350f;

  /* ---------------------------------------------------------------------
     Neutral Scale
     --------------------------------------------------------------------- */
  --neutral-0: #ffffff;
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
  --neutral-1000: #000000;

  /* ---------------------------------------------------------------------
     Semantic Scales — SUCCESS
     --------------------------------------------------------------------- */
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065f46;
  --success-900: #064e3b;

  /* ---------------------------------------------------------------------
     Semantic Scales — WARNING
     --------------------------------------------------------------------- */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  /* ---------------------------------------------------------------------
     Semantic Scales — ERROR
     --------------------------------------------------------------------- */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;
  /* ======================================================================
   2. BACKGROUND COLORS AND TEXT COLORS
   ====================================================================== */
  /* Primary Background */
  --bg-primary: var(--primary-600);
  --bg-primary-subtle: var(--primary-100);

  --bg-secondary: var(--secondary-600);
  --bg-secondary-subtle: var(--secondary-100);

  --bg-accent: var(--accent-600);
  --bg-accent-subtle: var(--accent-100);

  --bg-success: var(--success-600);
  --bg-success-subtle: var(--success-100);

  --bg-warning: var(--warning-600);
  --bg-warning-subtle: var(--warning-100);

  --bg-error: var(--error-600);
  --bg-error-subtle: var(--error-100);

  --bg-info: var(--primary-600); /* If 'info' uses primary scale */
  --bg-info-subtle: var(--primary-100); /* You may change this if needed */

  --bg-light: var(--neutral-300);
  --bg-light-subtle: var(--neutral-100);

  --bg-dark: var(--neutral-900);
  --bg-dark-subtle: var(--neutral-700);

  --bg-body-secondary: var(--neutral-50);
  --bg-body-tertiary: var(--neutral-100);
  --bg-body: var(--neutral-200);

  /*Background gradients*/
  /* ============================================================
   BACKGROUND GRADIENTS — VIS DESIGN SYSTEM
   ============================================================ */
  --bg-gradient-primary: linear-gradient(
    45deg,
    var(--primary-400),
    var(--primary-700)
  );

  --bg-gradient-secondary: linear-gradient(
    45deg,
    var(--secondary-400),
    var(--secondary-700)
  );

  --bg-gradient-accent: linear-gradient(
    45deg,
    var(--accent-400),
    var(--accent-700)
  );

  --bg-gradient-success: linear-gradient(
    45deg,
    var(--success-400),
    var(--success-700)
  );

  --bg-gradient-warning: linear-gradient(
    45deg,
    var(--warning-400),
    var(--warning-700)
  );

  --bg-gradient-error: linear-gradient(
    45deg,
    var(--error-400),
    var(--error-700)
  );

  --bg-gradient-info: linear-gradient(
    45deg,
    var(--primary-300),
    var(--primary-600)
  );

  --bg-gradient-neutral: linear-gradient(
    45deg,
    var(--neutral-200),
    var(--neutral-500)
  );
  /* ============================================================
   TEXT COLOR TOKENS — VIS DESIGN SYSTEM
   ============================================================ */

  --text-primary: var(--primary-700);
  --text-primary-emphasis: var(--primary-900);

  --text-secondary: var(--secondary-700);
  --text-secondary-emphasis: var(--secondary-900);

  --text-success: var(--success-700);
  --text-success-emphasis: var(--success-900);

  --text-danger: var(--error-700);
  --text-danger-emphasis: var(--error-900);

  --text-warning: var(--warning-700);
  --text-warning-emphasis: var(--warning-900);

  --text-info: var(--primary-600); /* Info uses primary scale */
  --text-info-emphasis: var(--primary-800);

  --text-light: var(--neutral-100); /* For dark backgrounds */
  --text-light-emphasis: var(--neutral-50);

  --text-dark: var(--neutral-900); /* Default dark text */
  --text-dark-emphasis: var(--neutral-1000);

  --text-body: var(--neutral-800); /* Ideal reading contrast */
  --text-body-emphasis: var(--neutral-900);

  --text-body-secondary: var(--neutral-600);
  --text-body-tertiary: var(--neutral-500);

  --text-black: var(--neutral-1000);
  --text-white: var(--neutral-0);

  --text-black-50: rgba(0, 0, 0, 0.5); /* Required opacity, unavoidable */
  --text-white-50: rgba(255, 255, 255, 0.5); /* Required opacity, unavoidable */
  /* ============================================================
   BORDER COLOR TOKENS
   ============================================================ */

  /* PRIMARY */
  --border-primary: var(--primary-600);
  --border-primary-subtle: var(--primary-300);
  --border-primary-light: var(--primary-100);

  /* SECONDARY */
  --border-secondary: var(--secondary-600);
  --border-secondary-subtle: var(--secondary-300);
  --border-secondary-light: var(--secondary-100);

  /* ACCENT */
  --border-accent: var(--accent-600);
  --border-accent-subtle: var(--accent-300);
  --border-accent-light: var(--accent-100);

  /* SUCCESS */
  --border-success: var(--success-600);
  --border-success-subtle: var(--success-300);
  --border-success-light: var(--success-100);

  /* WARNING */
  --border-warning: var(--warning-600);
  --border-warning-subtle: var(--warning-300);
  --border-warning-light: var(--warning-100);

  /* ERROR */
  --border-error: var(--error-600);
  --border-error-subtle: var(--error-300);
  --border-error-light: var(--error-100);

  /* INFO (Uses primary scale unless a separate info palette is created) */
  --border-info: var(--primary-600);
  --border-info-subtle: var(--primary-300);
  --border-info-light: var(--primary-100);

  /* NEUTRAL / UI STRUCTURE */
  --border-neutral: var(--neutral-300); /* Standard border (cards, inputs) */
  --border-neutral-subtle: var(--neutral-200); /* Light border */
  --border-neutral-light: var(--neutral-100); /* Hairline separator */

  /* DARK / LIGHT THEMES */
  --border-dark: var(--neutral-900);
  --border-dark-subtle: var(--neutral-700);

  --border-light: var(--neutral-0);
  --border-light-subtle: var(--neutral-50);

  /* SPECIAL (If you need a translucent hairline border) */
  --border-hairline: rgba(0, 0, 0, 0.1);
}