:root {
  /* color */
  --color-primary: 178, 100%, 39%; /* #00C9C3 - Liquid Teal */
  --color-secondary: 178, 100%, 96%; /* Teal 50 */
  --color-info: 215, 100%, 64%; /* #4994ff */
  --color-success: 162, 100%, 41%; /* #00D395 - Long Green */
  --color-destructive: 354, 100%, 65%; /* #FF4D5E - Short Red */
  --color-warning: 42, 67%, 54%; /* #D8A83A - Signal Gold */
  --color-disabled: 216, 20%, 80%; /* Navy tinted disabled */

  --color-text-primary: 216, 81%, 13%; /* #061B3A - Primary Navy */
  --color-text-secondary: 216, 30%, 40%; /* Navy tinted secondary */
  --color-text-tertiary: 216, 20%, 60%; /* Navy tinted tertiary */
  --color-text-disabled: 216, 20%, 80%; /* Navy tinted disabled */
  --color-text-readonly: 216, 20%, 80%;
  --color-text-icon: 216, 81%, 13%; /* #061B3A - Primary Navy */

  --color-background-primary: 216, 20%, 97%; /* Light navy tinted background */
  --color-background-secondary: 178, 100%, 39%; /* #00C9C3 - Liquid Teal (used at 0.1 opacity) */
  --color-background-popover: 0, 0%, 100%; /* #ffffff */
  --color-background-overlay: 216, 81%, 13%, 0.6; /* Navy overlay */
  --color-background-active: 178, 100%, 30%; /* Darker Teal */
  --color-background-switch: 216, 20%, 60%; /* Navy tinted switch */

  --color-border: 216, 20%, 85%; /* Navy tinted border */
  --color-border-thin: 0, 0%, 100%; /* #fff */
  --color-border-pagination: 216, 20%, 93%; /* Navy tinted pagination */

  /* Home token list toolbar (Figma Xfi) */
  --color-token-list-control-bg: 216, 20%, 94%;
  --color-token-list-placeholder: 216, 20%, 50%;
}

.dark:root{
  --color-primary: 178, 100%, 39%; /* #00C9C3 - Liquid Teal */
  --color-secondary: 218, 37%, 10%; /* #0F1724 - Dark Panel */
  --color-background-primary: 215, 85%, 5%; /* #020B18 - Dark Background */
  --color-background-secondary: 178, 100%, 39%; /* #00C9C3 - Liquid Teal */
  --color-background-popover: 218, 37%, 10%; /* #0F1724 - Dark Panel */
  --color-background-active: 178, 100%, 30%; /* Darker Teal */

  --color-text-primary: 0, 0%, 100%; /* #fff */
  --color-text-secondary: 216, 20%, 86%; /* Navy tinted light gray */
  --color-text-tertiary: 216, 20%, 67%; /* Navy tinted gray */
  --color-text-disabled: 216, 20%, 50%; /* Navy tinted dark gray */
  --color-text-readonly: 216, 20%, 50%;
  
  --color-border: 0, 0%, 100%;
  --alpha-border: 0.1;
  --color-border-thin: 0, 0%, 100%;
  --alpha-border-thin: 0.1;

  --color-token-list-control-bg: 215, 85%, 8%; /* Slightly lighter than Dark Background */
  --color-token-list-placeholder: 216, 20%, 50%;
}