:root {
    /* ======== PRIMARY COLORS ======== */
    --cmn-blue: #0E7CA2;
    --cmn-yellow: #FFCB05;
    --cmn-dark-gray: #253746;
    --cmn-light-blue: #1C9ED6;
    --white: #FFFFFF;
  
    /* ======== SECONDARY COLORS ======== */
    --cmn-green: #00A356;
    --cmn-dark-blue: #174E91;
    --cmn-pink: #CF489A;
    --cmn-orange: #D67625;
    --cmn-light-gray: #78868C;
  
    /* ======== SEMANTIC TOKENS ======== */
    --color-bg: var(--white);
    --cmn-dark-color: var(--cmn-dark-gray);
    --cmn-primary-color: var(--cmn-blue);
    --cmn-secondary-color: var(--cmn-yellow);
    --cmn-light-gray: #e7f2f6;
    --color-primary-contrast: var(--white);
    --color-border: #E2E8F0;
  
    /* ======== TYPOGRAPHY ======== */
    --font-display: "Gilroy", "Arial", "Open Sans", system-ui, sans-serif;
    --font-body: "Proxima Nova", "Arial", "Open Sans", system-ui, sans-serif;
  
    /* ======== FONT SIZES ======== */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
  
    /* ======== SPACING & RADIUS ======== */
    --cmn-spacing-13: 10rem;
    --cmn-spacing-12: 6rem;
    --cmn-spacing-11: 5rem;
    --cmn-spacing-10: 4rem;
    --cmn-spacing-9: 3rem;
    --cmn-spacing-8: 2.5rem;
    --cmn-spacing-7: 2rem;
    --cmn-spacing-6: 1.5rem;
    --cmn-spacing-5: 1rem;
    --cmn-spacing-4: 0.75rem;
    --cmn-spacing-3: 0.5rem;
    --cmn-spacing-2: 0.25rem;
    --cmn-spacing-1: 0.125rem;
  
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
  
    /* ======== SHADOWS ======== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, .08);
  
    /* ======== INFO ======== */
    --info-bg: var(--cmn-light-blue);
    --info-border: var(--cmn-light-blue);
    --info-text: var(--cmn-dark-blue);
  
    /* ======== SUCCESS ======== */
    --success-bg: var(--cmn-green);
    --success-border: var(--color-border);
    --success-text: var(--cmn-dark-gray);
  
    /* ======== WARNING ======== */
    --warning-bg: var(--cmn-yellow);
    --warning-border: var(--cmn-yellow);
    --warning-text: var(--cmn-dark-gray);
  
    /* ======== ERROR ======== */
    --error-bg: rgb(228, 31, 31);
    --error-border: var(--cmn-pink);
    --error-text: var(--cmn-dark-gray);
  }
  
  /* ======== DARK MODE ======== */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0B1220;
    --color-fg: #E2E8F0;
    --color-primary: #1C9ED6;
    --color-border: #1F2937;
  }