:root {
  color-scheme: light; /* for operating system */

  --nxn-pri-50: #E7F2F9;
  --nxn-pri-100: #B6D6EC;
  --nxn-pri-200: #92C2E3;
  --nxn-pri-300: #61A6D7;
  --nxn-pri-400: #4295CF;
  --nxn-pri-500: #137AC3;
  --nxn-pri-600: #116FB1;
  --nxn-pri-700: #0D578A;
  --nxn-pri-800: #0A436B;
  --nxn-pri-900: #083352;
  --nxn-pri-A100: #69c1ff;
  --nxn-pri-A200: #36acff;
  --nxn-pri-A400: #0397ff;
  --nxn-pri-A700: #0089e9;
  --nxn-pri-50-c: #000;
  --nxn-pri-100-c: #000;
  --nxn-pri-200-c: #000;
  --nxn-pri-300-c: #000;
  --nxn-pri-400-c: #000;
  --nxn-pri-500-c: #fff;
  --nxn-pri-600-c: #fff;
  --nxn-pri-700-c: #fff;
  --nxn-pri-800-c: #fff;
  --nxn-pri-900-c: #fff;
  --nxn-pri-A100-c: #000;
  --nxn-pri-A200-c: #000;
  --nxn-pri-A400-c: #000;
  --nxn-pri-A700-c: #000;
  --nxn-acc-50: #EEF7F8;
  --nxn-acc-100: #CBE6EB;
  --nxn-acc-200: #B2DAE1;
  --nxn-acc-300: #8EC9D3;
  --nxn-acc-400: #79BFCA;
  --nxn-acc-500: #57AFBD;
  --nxn-acc-600: #4F9FAC;
  --nxn-acc-700: #3E7C86;
  --nxn-acc-800: #306068;
  --nxn-acc-900: #254A4F;
  --nxn-acc-A100: #EEF7F8;
  --nxn-acc-A200: #CBE6EB;
  --nxn-acc-A400: #B2DAE1;
  --nxn-acc-A700: #8EC9D3;
  --nxn-acc-50-c: #000;
  --nxn-acc-100-c: #000;
  --nxn-acc-200-c: #000;
  --nxn-acc-300-c: #000;
  --nxn-acc-400-c: #000;
  --nxn-acc-500-c: #000;
  --nxn-acc-600-c: #000;
  --nxn-acc-700-c: #000;
  --nxn-acc-800-c: #000;
  --nxn-acc-900-c: #000;
  --nxn-acc-A100-c: #000;
  --nxn-acc-A200-c: #000;
  --nxn-acc-A400-c: #000;
  --nxn-acc-A700-c: #000;
  --nxn-war-50: #f7e0e0;
  --nxn-war-100: #ecb3b3;
  --nxn-war-200: #e08080;
  --nxn-war-300: #d34d4d;
  --nxn-war-400: #c92626;
  --nxn-war-500: #c00000;
  --nxn-war-600: #ba0000;
  --nxn-war-700: #b20000;
  --nxn-war-800: #aa0000;
  --nxn-war-900: #9c0000;
  --nxn-war-A100: #ffc7c7;
  --nxn-war-A200: #ff9494;
  --nxn-war-A400: #ff6161;
  --nxn-war-A700: #ff4747;
  --nxn-war-50-c: #000;
  --nxn-war-100-c: #000;
  --nxn-war-200-c: #000;
  --nxn-war-300-c: #000;
  --nxn-war-400-c: #fff;
  --nxn-war-500-c: #fff;
  --nxn-war-600-c: #fff;
  --nxn-war-700-c: #fff;
  --nxn-war-800-c: #fff;
  --nxn-war-900-c: #fff;
  --nxn-war-A100-c: #000;
  --nxn-war-A200-c: #000;
  --nxn-war-A400-c: #000;
  --nxn-war-A700-c: #000;

  /* brand colors */
  --nxn-sys-color-primary: var(--nxn-pri-500);
  --nxn-sys-color-on-primary: var(--nxn-pri-500-c);
  --nxn-sys-color-secondary: var(--nxn-acc-500);
  --nxn-sys-color-on-secondary: var(--nxn-acc-500-c);
  --nxn-sys-color-warn: var(--nxn-war-500);
  --nxn-sys-color-on-warn: var(--nxn-war-500-c);

  /* surfaces */
  --nxn-sys-color-background: #fafafa; /* body */
  --nxn-sys-color-on-background: rgba(0, 0, 0, 0.87);

  --nxn-sys-color-surface: #fff; /* panels or tabs */
  --nxn-sys-color-on-surface: rgba(0, 0, 0, 0.87);

  --nxn-sys-color-surface-well: #f2f2f2; /* well, pre, blockquote */
  --nxn-sys-color-on-surface-well: rgba(0, 0, 0, 0.87);

  --nxn-sys-color-surface-dialog: #fff; /* dialog or modal */
  --nxn-sys-color-on-surface-dialog: rgba(0, 0, 0, 0.87);

  --nxn-sys-disabled-surface: inherit;
  --nxn-sys-disabled-on-surface: rgba(0, 0, 0, 0.38);
  --nxn-sys-disabled-border-color: rgba(0, 0, 0, 0.38);

  /* border */
  --nxn-sys-color-border: #ccc;
  --nxn-sys-color-form-border: rgba(0, 0, 0, 0.6);

  /* text */
  --nxn-sys-color-text-disabled: #9e9e9e;
  --nxn-sys-color-text-muted: #666; /* secondary text */

  /* icon */
  --nxn-sys-color-icon: rgba(0, 0, 0, 0.54);

  --nxn-sys-typescale-display-medium-weight: 400;

  /* === Components === */

  /* btn primary */
  --nxn-comp-button-primary-surface: var(--nxn-sys-color-primary);
  --nxn-comp-button-primary-on-surface: var(--nxn-sys-color-on-primary);
  --nxn-comp-button-primary-border-color: var(--nxn-sys-color-primary);

  --nxn-comp-button-primary-hover-surface: var(--nxn-pri-400);
  --nxn-comp-button-primary-hover-on-surface: var(--nxn-pri-700-c);
  --nxn-comp-button-primary-hover-border-color: var(--nxn-pri-400);

  --nxn-comp-button-primary-focus-surface: var(--nxn-pri-700);
  --nxn-comp-button-primary-focus-on-surface: var(--nxn-pri-700-c);
  --nxn-comp-button-primary-focus-border-color: var(--nxn-pri-700);
  --nxn-comp-button-primary-focus-outline-color: var(--nxn-pri-A100);

  /* btn secondary */
  --nxn-comp-button-secondary-surface: #fff;
  --nxn-comp-button-secondary-on-surface: #262626;
  --nxn-comp-button-secondary-border-color: #262626;

  --nxn-comp-button-secondary-hover-surface: #666;
  --nxn-comp-button-secondary-hover-on-surface: #fff;
  --nxn-comp-button-secondary-hover-border-color: #666;

  --nxn-comp-button-secondary-focus-surface: #4d4d4d;
  --nxn-comp-button-secondary-focus-on-surface: #fff;
  --nxn-comp-button-secondary-focus-border-color: #4d4d4d;
  --nxn-comp-button-secondary-focus-outline-color: #a6a6a6;

  /* disabled colors for primary button */
  --nxn-comp-button-primary-disabled-surface: #d9d9d9;
  --nxn-comp-button-primary-disabled-on-surface: rgba(0, 0, 0, 0.4);
  --nxn-comp-button-primary-disabled-border-color: #d4d4d4;

  /* disabled colors for secondary button */
  --nxn-comp-button-secondary-disabled-surface: var(--nxn-sys-color-surface);
  --nxn-comp-button-secondary-disabled-on-surface: rgba(0, 0, 0, 0.38);
  --nxn-comp-button-secondary-disabled-border-color: #d4d4d4;

  /* link */
  --nxn-comp-link-color-hover: var(--nxn-pri-800);
  --nxn-comp-link-color-visited: var(--nxn-pri-500);
  --nxn-comp-link-color: var(--nxn-pri-500);

  /* spinner */
  --nxn-comp-spinner-stroke-color: var(--nxn-acc-500);

  /* list-item hover color (usually within menu or panel) */
  --nxn-comp-list-item-hover-color: var(--nxn-pri-50);

  /* table */
  --nxn-comp-table-active-surface: var(--nxn-acc-100); /* The NEXEN Accent palette doesn't make sense @Svetlana */
  --nxn-comp-table-stripe-hover-surface: #e0e0e0;
  --nxn-comp-table-stripe-surface: #eeeeee;

  /* alerts */
  --nxn-comp-alert-color: #262626;
  --nxn-comp-alert-icon-color: var(--nxn-sys-color-icon);
  --nxn-comp-alert-success-surface: #8ac1a1;
  --nxn-comp-alert-success-border-color: #78af8f;
  --nxn-comp-alert-danger-surface: #e28a8a;
  --nxn-comp-alert-danger-border-color: #c97575;
  --nxn-comp-alert-warning-surface: #fce38e;
  --nxn-comp-alert-warning-border-color: #d9c273;
  --nxn-comp-alert-info-surface: #71ccff;
  --nxn-comp-alert-info-border-color: #60a7d9;

  /* snack-bar */
  --nxn-comp-snack-bar-surface: #212121;
  --nxn-comp-snack-bar-on-surface: rgba(255, 255, 255, 0.87);
  --nxn-comp-snack-bar-border: #212121;

  /* snack-bar medium emphasis */
  --nxn-comp-snack-bar-med-surface: #616161;
  --nxn-comp-snack-bar-med-on-surface: #fff;
  --nxn-comp-snack-bar-med-border: #616161;

  /* badges */
  --nxn-comp-badge-color: var(--nxn-comp-alert-color);
  --nxn-comp-badge-success-surface: var(--nxn-comp-alert-success-surface);
  --nxn-comp-badge-success-border-color: var(--nxn-comp-alert-success-border-color);
  --nxn-comp-badge-danger-surface: var(--nxn-comp-alert-danger-surface);
  --nxn-comp-badge-danger-border-color: var(--nxn-comp-alert-danger-border-color);
  --nxn-comp-badge-warning-surface: var(--nxn-comp-alert-warning-surface);
  --nxn-comp-badge-warning-border-color: var(--nxn-comp-alert-warning-border-color);
  --nxn-comp-badge-info-surface: var(--nxn-comp-alert-info-surface);
  --nxn-comp-badge-info-border-color: var(--nxn-comp-alert-info-border-color);

  /* checkbox */
  --nxn-comp-checkbox-color: var(--nxn-pri-500);
}

:root.dark-theme {
  color-scheme: dark; /* for operating system */

  --nxn-pri-50: #ECF6FA;
  --nxn-pri-100: #C3E2F0;
  --nxn-pri-200: #A5D5E8;
  --nxn-pri-300: #7CC1DE;
  --nxn-pri-400: #63B5D8;
  --nxn-pri-500: #3CA3CE;
  --nxn-pri-600: #3794BB;
  --nxn-pri-700: #2B7492;
  --nxn-pri-800: #215A71;
  --nxn-pri-900: #194457;
  --nxn-pri-A100: #c6eaff;
  --nxn-pri-A200: #93d8ff;
  --nxn-pri-A400: #60c5ff;
  --nxn-pri-A700: #47bcff;
  --nxn-pri-50-c: #000000;
  --nxn-pri-100-c: #000000;
  --nxn-pri-200-c: #000000;
  --nxn-pri-300-c: #000000;
  --nxn-pri-400-c: #000000;
  --nxn-pri-500-c: #000000;
  --nxn-pri-600-c: #000000;
  --nxn-pri-700-c: #fff;
  --nxn-pri-800-c: #fff;
  --nxn-pri-900-c: #fff;
  --nxn-pri-A100-c: #000000;
  --nxn-pri-A200-c: #000000;
  --nxn-pri-A400-c: #000000;
  --nxn-pri-A700-c: #000000;
  --nxn-acc-50: #EEF7F8;
  --nxn-acc-100: #CBE6EB;
  --nxn-acc-200: #B2DAE1;
  --nxn-acc-300: #8EC9D3;
  --nxn-acc-400: #79BFCA;
  --nxn-acc-500: #57AFBD;
  --nxn-acc-600: #4F9FAC;
  --nxn-acc-700: #3E7C86;
  --nxn-acc-800: #306068;
  --nxn-acc-900: #254A4F;
  --nxn-acc-A100: #EEF7F8;
  --nxn-acc-A200: #CBE6EB;
  --nxn-acc-A400: #B2DAE1;
  --nxn-acc-A700: #8EC9D3;
  --nxn-acc-50-c: #000;
  --nxn-acc-100-c: #000;
  --nxn-acc-200-c: #000;
  --nxn-acc-300-c: #000;
  --nxn-acc-400-c: #000;
  --nxn-acc-500-c: #000;
  --nxn-acc-600-c: #000;
  --nxn-acc-700-c: #fff;
  --nxn-acc-800-c: #fff;
  --nxn-acc-900-c: #fff;
  --nxn-acc-A100-c: #000;
  --nxn-acc-A200-c: #000;
  --nxn-acc-A400-c: #000;
  --nxn-acc-A700-c: #000;
  --nxn-war-50: #ffecec;
  --nxn-war-100: #ffd0d0;
  --nxn-war-200: #ffb0b0;
  --nxn-war-300: #ff9090;
  --nxn-war-400: #ff7979;
  --nxn-war-500: #ff6161;
  --nxn-war-600: #ff5959;
  --nxn-war-700: #ff4f4f;
  --nxn-war-800: #ff4545;
  --nxn-war-900: #ff3333;
  --nxn-war-A100: #ffffff;
  --nxn-war-A200: #ffffff;
  --nxn-war-A400: #ffdede;
  --nxn-war-A700: #ffc4c4;
  --nxn-war-50-c: #000;
  --nxn-war-100-c: #000;
  --nxn-war-200-c: #000;
  --nxn-war-300-c: #000;
  --nxn-war-400-c: #000;
  --nxn-war-500-c: #000;
  --nxn-war-600-c: #000;
  --nxn-war-700-c: #000;
  --nxn-war-800-c: #000;
  --nxn-war-900-c: #000;
  --nxn-war-A100-c: #000;
  --nxn-war-A200-c: #000;
  --nxn-war-A400-c: #000;
  --nxn-war-A700-c: #000;


  /* brand colors */
  --nxn-sys-color-primary: var(--nxn-pri-500);
  --nxn-sys-color-on-primary: var(--nxn-pri-500-c);
  --nxn-sys-color-secondary: var(--nxn-acc-500);
  --nxn-sys-color-on-secondary: var(--nxn-acc-500-c);
  --nxn-sys-color-warn: var(--nxn-war-500);
  --nxn-sys-color-on-warn: var(--nxn-war-500-c);

  /* surfaces */
  --nxn-sys-color-background: #1a1a1a; /* body */
  --nxn-sys-color-on-background: rgba(255, 255, 255, 0.87);

  --nxn-sys-color-surface: #262626; /* panel, tab */
  --nxn-sys-color-on-surface: rgba(255, 255, 255, 0.87);

  --nxn-sys-color-surface-well: #333; /* well, pre, blockquote */
  --nxn-sys-color-on-surface-well: rgba(255, 255, 255, 0.87);

  --nxn-sys-color-surface-dialog: #404040; /* modals */
  --nxn-sys-color-on-surface-dialog: rgba(255, 255, 255, 0.87);

  --nxn-sys-disabled-surface: inherit;
  --nxn-sys-disabled-on-surface: rgba(255, 255, 255, 0.38);
  --nxn-sys-disabled-border-color: rgba(255, 255, 255, 0.38);

  /* border */
  --nxn-sys-color-border: #404040;
  --nxn-sys-color-form-border: rgba(255, 255, 255, 0.6);

  /* text */
  --nxn-sys-color-text-disabled: #616161;
  --nxn-sys-color-text-muted: #999; /* secondary text */

  /* icon */
  --nxn-sys-color-icon: rgba(255, 255, 255, 0.54);

  --nxn-sys-typescale-display-medium-weight: 350;

  /* === Components === */

  /* btn primary */
  --nxn-comp-button-primary-surface: var(--nxn-sys-color-primary);
  --nxn-comp-button-primary-on-surface: var(--nxn-sys-color-on-primary);
  --nxn-comp-button-primary-border-color: var(--nxn-sys-color-primary);

  --nxn-comp-button-primary-hover-surface: var(--nxn-pri-400);
  --nxn-comp-button-primary-hover-on-surface: var(--nxn-pri-400-c);
  --nxn-comp-button-primary-hover-border-color: var(--nxn-pri-400);

  --nxn-comp-button-primary-focus-surface: var(--nxn-pri-600);
  --nxn-comp-button-primary-focus-on-surface: var(--nxn-pri-600-c);
  --nxn-comp-button-primary-focus-border-color: var(--nxn-pri-600);
  --nxn-comp-button-primary-focus-outline-color: var(--nxn-pri-A100);

  /* btn secondary */
  --nxn-comp-button-secondary-surface: #262626;
  --nxn-comp-button-secondary-on-surface: rgba(255, 255, 255, 0.6);
  --nxn-comp-button-secondary-border-color: rgba(255, 255, 255, 0.6);

  --nxn-comp-button-secondary-hover-surface: #262626;
  --nxn-comp-button-secondary-hover-on-surface: #fff;
  --nxn-comp-button-secondary-hover-border-color: #fff;

  --nxn-comp-button-secondary-focus-surface: #262626;
  --nxn-comp-button-secondary-focus-on-surface: #fff;
  --nxn-comp-button-secondary-focus-border-color: #fff;
  --nxn-comp-button-secondary-focus-outline-color: #fff;

  /* disabled colors for primary button */
  --nxn-comp-button-primary-disabled-surface: #8c8c8c;
  --nxn-comp-button-primary-disabled-on-surface: rgba(0, 0, 0, 0.73);
  --nxn-comp-button-primary-disabled-border-color: #8c8c8c;

  /* disabled colors for secondary button */
  --nxn-comp-button-secondary-disabled-surface: var(--nxn-sys-color-surface);
  --nxn-comp-button-secondary-disabled-on-surface: rgba(255, 255, 255, 0.38);
  --nxn-comp-button-secondary-disabled-border-color: #8c8c8c;

  /* link */
  --nxn-comp-link-color-hover: var(--nxn-pri-200);
  --nxn-comp-link-color-visited: var(--nxn-pri-300);
  --nxn-comp-link-color: var(--nxn-pri-300);

  /* spinner */
  --nxn-comp-spinner-stroke-color: var(--nxn-acc-500);

  /* list-item hover color (usually within menu or panel) */
  --nxn-comp-list-item-hover-color: #404040;

  /* table */
  --nxn-comp-table-active-surface: color-mix(in srgb, var(--nxn-acc-900), #000 30%); /* darken the color */
  --nxn-comp-table-stripe-hover-surface: #4d4d4d;
  --nxn-comp-table-stripe-surface: #333;

  /* alerts*/
  --nxn-comp-alert-color: #262626;
  --nxn-comp-alert-icon-color: rgba(0, 0, 0, 0.54);
  --nxn-comp-alert-success-surface: #99c9ad;
  --nxn-comp-alert-success-border-color: #acdcc1;
  --nxn-comp-alert-danger-surface: #ff8181;
  --nxn-comp-alert-danger-border-color: #fa9c9c;
  --nxn-comp-alert-warning-surface: #fde79d;
  --nxn-comp-alert-warning-border-color: #faebbb;
  --nxn-comp-alert-info-surface: #69c1ff;
  --nxn-comp-alert-info-border-color: #9fd2f6;

  /* snack-bar high emphasis */
  --nxn-comp-snack-bar-surface: #f5f5f5;
  --nxn-comp-snack-bar-on-surface: rgba(0, 0, 0, 0.87);
  --nxn-comp-snack-bar-border: #f5f5f5;

  /* snack-bar medium emphasis */
  --nxn-comp-snack-bar-med-surface: #d9d9d9;
  --nxn-comp-snack-bar-med-on-surface: rgba(0, 0, 0, 0.87);
  --nxn-comp-snack-bar-med-border: #d9d9d9;

  /* badges */
  --nxn-comp-badge-color: var(--nxn-comp-alert-color);
  --nxn-comp-badge-success-surface: var(--nxn-comp-alert-success-surface);
  --nxn-comp-badge-success-border-color: var(--nxn-comp-alert-success-border-color);
  --nxn-comp-badge-danger-surface: var(--nxn-comp-alert-danger-surface);
  --nxn-comp-badge-danger-border-color: var(--nxn-comp-alert-danger-border-color);
  --nxn-comp-badge-warning-surface: var(--nxn-comp-alert-warning-surface);
  --nxn-comp-badge-warning-border-color: var(--nxn-comp-alert-warning-border-color);
  --nxn-comp-badge-info-surface: var(--nxn-comp-alert-info-surface);
  --nxn-comp-badge-info-border-color: var(--nxn-comp-alert-info-border-color);

  /* checkbox */
  --nxn-comp-checkbox-color: var(--nxn-pri-500);
}