/**
 * colors.css - Color System
 * 
 * Implements Radix UI color scales with light and dark mode support.
 * https://www.radix-ui.com/colors
 */


/* Blue Colors */
:root {
  /* Blue Light */
  --blue-1: hsl(206, 100%, 99.2%);
  --blue-2: hsl(210, 100%, 98.0%);
  --blue-3: hsl(209, 100%, 96.5%);
  --blue-4: hsl(210, 98.8%, 94.0%);
  --blue-5: hsl(209, 95.0%, 90.1%);
  --blue-6: hsl(209, 81.2%, 84.5%);
  --blue-7: hsl(208, 77.5%, 76.9%);
  --blue-8: hsl(206, 81.9%, 65.3%);
  --blue-9: hsl(206, 100%, 50.0%);
  --blue-10: hsl(208, 100%, 47.3%);
  --blue-11: hsl(212, 100%, 43.2%);
  --blue-12: hsl(213, 100%, 14.0%);
}

/* Slate Colors */
:root {
  /* Slate Light */
  --slate-1: hsl(206, 30.0%, 98.8%);
  --slate-2: hsl(210, 16.7%, 97.6%);
  --slate-3: hsl(209, 13.3%, 95.3%);
  --slate-4: hsl(209, 12.2%, 93.2%);
  --slate-5: hsl(208, 11.7%, 91.1%);
  --slate-6: hsl(208, 11.3%, 88.9%);
  --slate-7: hsl(207, 11.1%, 85.9%);
  --slate-8: hsl(205, 10.7%, 78.0%);
  --slate-9: hsl(206, 6.0%, 56.1%);
  --slate-10: hsl(206, 5.8%, 52.3%);
  --slate-11: hsl(206, 6.0%, 43.5%);
  --slate-12: hsl(206, 24.0%, 9.0%);
}

/* Black Alpha */
:root {
  --black-a1: hsla(0, 0%, 0%, 0.012);
  --black-a2: hsla(0, 0%, 0%, 0.027);
  --black-a3: hsla(0, 0%, 0%, 0.047);
  --black-a4: hsla(0, 0%, 0%, 0.071);
  --black-a5: hsla(0, 0%, 0%, 0.090);
  --black-a6: hsla(0, 0%, 0%, 0.114);
  --black-a7: hsla(0, 0%, 0%, 0.141);
  --black-a8: hsla(0, 0%, 0%, 0.220);
  --black-a9: hsla(0, 0%, 0%, 0.439);
  --black-a10: hsla(0, 0%, 0%, 0.478);
  --black-a11: hsla(0, 0%, 0%, 0.565);
  --black-a12: hsla(0, 0%, 0%, 0.910);
}

/* White Alpha */
:root {
  --white-a1: hsla(0, 0%, 100%, 0.012);
  --white-a2: hsla(0, 0%, 100%, 0.027);
  --white-a3: hsla(0, 0%, 100%, 0.047);
  --white-a4: hsla(0, 0%, 100%, 0.071);
  --white-a5: hsla(0, 0%, 100%, 0.090);
  --white-a6: hsla(0, 0%, 100%, 0.114);
  --white-a7: hsla(0, 0%, 100%, 0.141);
  --white-a8: hsla(0, 0%, 100%, 0.220);
  --white-a9: hsla(0, 0%, 100%, 0.439);
  --white-a10: hsla(0, 0%, 100%, 0.478);
  --white-a11: hsla(0, 0%, 100%, 0.565);
  --white-a12: hsla(0, 0%, 100%, 0.910);
}

/* Semantic Color Tokens */
:root {
  /* Text Colors */
  --color-text-primary: var(--slate-12);
  --color-text-secondary: var(--slate-11);
  --color-text-tertiary: var(--slate-10);
  --color-text-display: var(--slate-12);

  --color-text-accent-primary: var(--blue-12);
  --color-text-accent-secondary: var(--blue-11);
  --color-text-accent-tertiary: var(--blue-10);
  --color-text-accent-display: var(--blue-12);
  
  /* Background Colors */
  --color-background-primary: var(--slate-1);
  --color-background-secondary: var(--slate-2);
  --color-background-tertiary: var(--slate-3);
  
  /* UI Colors */
  --color-primary: var(--blue-9);
  --color-primary-hover: var(--blue-10);
  --color-primary-active: var(--blue-11);
  
  /* Surface Colors */
  --color-surface: var(--slate-1);
  --color-surface-hover: var(--slate-2);
  --color-surface-active: var(--slate-3);
  
  /* Border Colors */
  --color-border-light: var(--slate-3);
  --color-border-standard: var(--slate-6);
  --color-border-strong: var(--slate-7);
  
  /* State Colors */
  --color-success: hsl(146, 80%, 42.1%);
  --color-success-hover: hsl(149, 80%, 47.2%);
  --color-success-active: hsl(151, 80%, 52.0%);
  
  --color-error: hsl(358, 75%, 59.5%);
  --color-error-hover: hsl(358, 75%, 64.5%);
  --color-error-active: hsl(357, 75%, 69.0%);
  
  --color-warning: hsl(35, 90%, 50.5%);
  --color-warning-hover: hsl(32, 90%, 53.8%);
  --color-warning-active: hsl(30, 90%, 58.8%);
  
  --color-info: var(--blue-9);
  --color-info-hover: var(--blue-10);
  --color-info-active: var(--blue-11);

  /* Interactive Overlays */
  --color-overlay-hover: var(--black-a3);
  --color-overlay-active: var(--black-a5);
  --color-overlay-disabled: var(--black-a2);
}


/* Dark Theme Semantic Color Tokens */

  .dark {

    --blue-1: hsl(212, 35.0%, 9.2%);
    --blue-2: hsl(216, 50.0%, 11.8%);
    --blue-3: hsl(214, 59.4%, 15.3%);
    --blue-4: hsl(214, 65.8%, 17.9%);
    --blue-5: hsl(213, 71.2%, 20.2%);
    --blue-6: hsl(212, 77.4%, 23.1%);
    --blue-7: hsl(211, 85.1%, 27.4%);
    --blue-8: hsl(211, 89.7%, 34.1%);
    --blue-9: hsl(206, 100%, 50.0%);
    --blue-10: hsl(209, 100%, 60.6%);
    --blue-11: hsl(210, 100%, 66.1%);
    --blue-12: hsl(206, 98.0%, 95.8%);

    /* Slate Dark */
    --slate-1: hsl(200, 7.0%, 8.8%);
    --slate-2: hsl(195, 7.1%, 11.0%);
    --slate-3: hsl(197, 6.8%, 13.6%);
    --slate-4: hsl(198, 6.6%, 15.8%);
    --slate-5: hsl(199, 6.4%, 17.9%);
    --slate-6: hsl(201, 6.2%, 20.5%);
    --slate-7: hsl(203, 6.0%, 24.3%);
    --slate-8: hsl(207, 5.6%, 31.6%);
    --slate-9: hsl(206, 6.0%, 43.9%);
    --slate-10: hsl(206, 5.2%, 49.5%);
    --slate-11: hsl(206, 6.0%, 63.0%);
    --slate-12: hsl(210, 6.0%, 93.0%);

    /* Text Colors */
    --color-text-primary: var(--slate-12);
    --color-text-secondary: var(--slate-11);
    --color-text-tertiary: var(--slate-10);
    --color-text-display: var(--slate-12);

    --color-text-accent-primary: var(--blue-12);
    --color-text-accent-secondary: var(--blue-11);
    --color-text-accent-tertiary: var(--blue-10);
    --color-text-accent-display: var(--blue-12);
    
    /* Background Colors */
    --color-background-primary: var(--slate-1);
    --color-background-secondary: var(--slate-2);
    --color-background-tertiary: var(--slate-3);
    
    /* UI Colors */
    --color-primary: var(--blue-9);
    --color-primary-hover: var(--blue-10);
    --color-primary-active: var(--blue-11);
    
    /* Surface Colors */
    --color-surface: var(--slate-1);
    --color-surface-hover: var(--slate-2);
    --color-surface-active: var(--slate-3);
    
    /* Border Colors */
    --color-border-light: var(--slate-3);
    --color-border-standard: var(--slate-6);
    --color-border-strong: var(--slate-7);
    
    /* State Colors */
    --color-success: hsl(146, 80%, 42.1%);
    --color-success-hover: hsl(149, 80%, 47.2%);
    --color-success-active: hsl(151, 80%, 52.0%);
    
    --color-error: hsl(358, 75%, 59.5%);
    --color-error-hover: hsl(358, 75%, 64.5%);
    --color-error-active: hsl(357, 75%, 69.0%);
    
    --color-warning: hsl(35, 90%, 50.5%);
    --color-warning-hover: hsl(32, 90%, 53.8%);
    --color-warning-active: hsl(30, 90%, 58.8%);
    
    --color-info: var(--blue-9);
    --color-info-hover: var(--blue-10);
    --color-info-active: var(--blue-11);
    
    /* Interactive Overlays */
    --color-overlay-hover: var(--white-a3);
    --color-overlay-active: var(--white-a5);
    --color-overlay-disabled: var(--white-a2);
  }

  .light{
      /* Blue Light */
      --blue-1: hsl(206, 100%, 99.2%);
      --blue-2: hsl(210, 100%, 98.0%);
      --blue-3: hsl(209, 100%, 96.5%);
      --blue-4: hsl(210, 98.8%, 94.0%);
      --blue-5: hsl(209, 95.0%, 90.1%);
      --blue-6: hsl(209, 81.2%, 84.5%);
      --blue-7: hsl(208, 77.5%, 76.9%);
      --blue-8: hsl(206, 81.9%, 65.3%);
      --blue-9: hsl(206, 100%, 50.0%);
      --blue-10: hsl(208, 100%, 47.3%);
      --blue-11: hsl(212, 100%, 43.2%);
      --blue-12: hsl(213, 100%, 14.0%);
    }
    
    /* Slate Colors */
    :root {
      /* Slate Light */
      --slate-1: hsl(206, 30.0%, 98.8%);
      --slate-2: hsl(210, 16.7%, 97.6%);
      --slate-3: hsl(209, 13.3%, 95.3%);
      --slate-4: hsl(209, 12.2%, 93.2%);
      --slate-5: hsl(208, 11.7%, 91.1%);
      --slate-6: hsl(208, 11.3%, 88.9%);
      --slate-7: hsl(207, 11.1%, 85.9%);
      --slate-8: hsl(205, 10.7%, 78.0%);
      --slate-9: hsl(206, 6.0%, 56.1%);
      --slate-10: hsl(206, 5.8%, 52.3%);
      --slate-11: hsl(206, 6.0%, 43.5%);
      --slate-12: hsl(206, 24.0%, 9.0%);
    }