/*
 *
 // lv.1 - materials
 *
 */
:root {
  --c-gray-0: #000000;
  --c-gray-50: #030419;
  --c-gray-100: #000224;
  --c-gray-200: #282B53;
  --c-gray-300: #9093B9;
  --c-gray-500: #a4a4a4;
  --c-gray-600: #e9e9e9;
  --c-gray-900: #f5f6ff;
  --c-gray-950: #f8f8fd;
  --c-gray-1000: #ffffff;

  --c-blue-600: #4251FA;    
  --c-red-400: #CC0025;    
  --c-red-500: #FF1A35;    
  --c-red-900: #FFE5E6;    
  --c-green-300: #4ACF4A;
}

/*
 *
 // lv.2 - base
 *
 */
:root {
  --c-dark-primary: var(--c-gray-50);
  --c-dark-secondary: var(--c-gray-200);
  --c-dark-third: var(--c-gray-300);
  --c-dark-light: var(--c-gray-500);

  --c-light-primary: var(--c-gray-900);
  --c-light-secondary: var(--c-gray-600);

  --c-black: var(--c-gray-0);
  --c-white: var(--c-gray-1000);    
}

/*
 *
 // lv.3 - color modes / themes
 *
 */
:root {
  --c-theme-pure: var(--c-white);
  --c-contrast-pure: var(--c-black);

  --c-theme-primary: var(--c-light-primary);
  --c-theme-secondary: var(--c-light-secondary);

  --c-contrast-primary: var(--c-dark-primary);
  --c-contrast-secondary: var(--c-dark-secondary);
  --c-contrast-third: var(--c-dark-third);
  --c-contrast-light: var(--c-dark-light);

  --c-gray: var(--c-gray-600);
  --c-highlight: var(--c-black);    

  --c-highlight-primary: var(--c-blue-600);
  --c-danger-primary: var(--c-red-500);
  --c-danger-dark: var(--c-red-400);
  --c-danger-light: var(--c-red-900);
  --c-success-primary: var(--c-green-300);
}
/* TODO: implement dark theme colors */
/* :root[data-c-theme="dark"] {} */

/*
 *
 // lv.4 - tokens 
 *
 */
:root {
  --sp-c-txt-primary: var(--c-contrast-primary);
  --sp-c-txt-secondary: var(--c-contrast-secondary);
  --sp-c-txt-third: var(--c-contrast-third);

  --sp-c-txt-contrast-primary: var(--c-theme-primary);
  --sp-c-txt-contrast-secondary: var(--c-theme-secondary);    

  --sp-c-txt-light: var(--c-contrast-light);
  --sp-c-txt-gray: var(--c-gray);
  --sp-c-txt-highlight: var(--c-highlight-primary);
  --sp-c-txt-danger: var(--c-danger-dark);
  --sp-c-txt-success: var(--c-success-primary);

  --sp-c-border-primary: var(--c-gray);

  --sp-c-bg-primary: var(--c-theme-pure);
  --sp-c-bg-secondary: var(--c-theme-primary);
  --sp-c-bg-danger: var(--c-danger-light);
}

.-sp-c-txt-primary {
  color: var(--sp-c-txt-primary);
}
.-sp-c-txt-secondary {
  color: var(--sp-c-txt-secondary);
}
.-sp-c-txt-third {
  color: var(--sp-c-txt-third);
}
.-sp-c-txt-light {
  color: var(--sp-c-txt-light);
}
.-sp-c-txt-gray {
  color: var(--sp-c-txt-gray);
}
.-sp-c-txt-highlight {
  color: var(--sp-c-txt-highlight);
}
.-sp-c-txt-danger {
  color: var(--sp-c-txt-danger);
}
.-sp-c-txt-success {
  color: var(--sp-c-txt-success);
}
.-sp-c-border-primary {
  border-color: var(--sp-c-border-primary);
}
.-sp-c-bg-primary {
  background-color: var(--sp-c-bg-primary);
}
.-sp-c-bg-secondary {
  background-color: var(--sp-c-bg-secondary);
}