/* ==========================================================
   SEMANTIC TOKENS
========================================================== */

:root {

/* ==========================================================
   BRAND
========================================================== */

--color-primary: var(--color-blue-800);
--color-primary-hover: var(--color-blue-700);
--color-primary-active: var(--color-blue-900);

--color-secondary: var(--color-gold-500);
--color-secondary-hover: var(--color-gold-400);
--color-secondary-active: var(--color-gold-600);

/* ==========================================================
   BACKGROUND
========================================================== */

--color-background: var(--color-white);
--color-background-alt: var(--color-gray-50);
--color-background-dark: var(--color-gray-900);

/* ==========================================================
   SURFACE
========================================================== */

--color-surface: var(--color-white);
--color-surface-alt: var(--color-gray-100);
--color-surface-dark: var(--color-gray-800);

/* ==========================================================
   TEXT
========================================================== */

--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-700);
--color-text-muted: var(--color-gray-500);
--color-text-inverse: var(--color-white);

/* ==========================================================
   BORDER
========================================================== */

--color-border: var(--color-gray-200);
--color-border-hover: var(--color-gray-300);
--color-border-focus: var(--color-blue-500);

/* ==========================================================
   ACTIONS
========================================================== */

--color-action-primary: var(--color-primary);
--color-action-primary-hover: var(--color-primary-hover);

--color-action-secondary: var(--color-secondary);
--color-action-secondary-hover: var(--color-secondary-hover);

/* ==========================================================
   STATES
========================================================== */

--color-success-bg: #F0FDF4;
--color-success-text: var(--color-success);

--color-warning-bg: #FFF7ED;
--color-warning-text: var(--color-warning);

--color-error-bg: #FEF2F2;
--color-error-text: var(--color-error);

--color-info-bg: #EFF6FF;
--color-info-text: var(--color-info);

}