* {
  --oscd-theme-secondary: #6c71c4;
  --oscd-theme-primary: #2aa198;
  --oscd-theme-error: #dc3545;

  --oscd-theme-base3: #fdf6e3;
  --oscd-theme-base2: #eee8d5;
  --oscd-theme-base1: #93a1a1;
  --oscd-theme-base0: #839496;
  --oscd-theme-base00: #657b83;
  --oscd-theme-base01: #586e75;
  --oscd-theme-base02: #073642;
  --oscd-theme-base03: #002b36;

  --oscd-theme-text-font: "Roboto";
  --oscd-theme-icon-font: "Material Symbols Outlined";

  --primary: var(--oscd-theme-primary);
  --secondary: var(--oscd-theme-secondary);

  margin: 0px;
  padding: 0px;
}

:root {
  /* SHOULD have been built with Figma plugin as per guidance for Material Web Components */
  /* see https://github.com/material-components/material-web/blob/main/docs/theming/color.md */

  --oscd-error: var(--oscd-theme-error, #dc322f);

  --oscd-text-font: var(--oscd-theme-text-font, "Roboto");
  --oscd-icon-font: var(--oscd-theme-icon-font, "Material Symbols Outlined");
  --oscd-text-font-mono: var(--oscd-theme-text-font-mono, "Roboto Mono");

  --oscd-warning: var(--oscd-theme-warning, #b58900);
  --md-sys-color-primary: var(--oscd-primary);
  --md-sys-color-on-primary: var(--oscd-base3);

  --md-sys-color-secondary: var(--oscd-secondary);
  --md-sys-color-on-secondary: var(--oscd-base3);
  --md-sys-color-secondary-container: var(--oscd-base2);

  --md-sys-color-surface: var(--oscd-base3);
  --md-sys-color-on-surface: var(--oscd-base00);
  --md-sys-color-surface-variant: var(--oscd-base3);
  --md-sys-color-on-surface-variant: var(--oscd-base00);
  --md-sys-color-surface-bright: var(--oscd-base2);
  --md-sys-color-surface-container: var(--oscd-base3);
  --md-sys-color-surface-container-high: var(--oscd-base3);
  --md-sys-color-surface-container-highest: var(--oscd-base3);

  --md-sys-color-outline-variant: var(--oscd-primary);
  --md-sys-color-scrim: #000000;
  --md-sys-color-error: var(--oscd-error);
  --md-sys-color-on-error: var(--oscd-base3);

  /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */
  --md-icon-button-disabled-icon-color: var(--oscd-base3);

  /* MDC Theme Colors 
       * Needed for supporting any pluggins still using the depricated MWC Components
       */
  --mdc-theme-primary: var(--oscd-primary);
  --mdc-theme-secondary: var(--oscd-secondary);
  --mdc-theme-background: var(--oscd-base3);
  --mdc-theme-surface: var(--oscd-base3);
  --mdc-theme-on-primary: var(--oscd-base2);
  --mdc-theme-on-secondary: var(--oscd-base02);
  --mdc-theme-on-background: var(--oscd-base00);
  --mdc-theme-on-surface: var(--oscd-base00);
  --mdc-theme-text-primary-on-background: var(--oscd-base01);
  --mdc-theme-text-secondary-on-background: var(--oscd-base00);
  --mdc-theme-text-icon-on-background: var(--oscd-base00);
  --mdc-theme-error: var(--oscd-error);

  --mdc-button-disabled-ink-color: var(--oscd-base1);

  --mdc-drawer-heading-ink-color: var(--oscd-base00);

  --mdc-dialog-heading-ink-color: var(--oscd-base00);

  --mdc-text-field-fill-color: var(--oscd-base2);
  --mdc-text-field-ink-color: var(--oscd-base02);
  --mdc-text-field-label-ink-color: var(--oscd-base01);
  --mdc-text-field-idle-line-color: var(--oscd-base00);
  --mdc-text-field-hover-line-color: var(--oscd-base02);

  --mdc-select-fill-color: var(--oscd-base2);
  --mdc-select-ink-color: var(--oscd-base02);
  --mdc-select-label-ink-color: var(--oscd-base01);
  --mdc-select-idle-line-color: var(--oscd-base00);
  --mdc-select-hover-line-color: var(--oscd-base02);
  --mdc-select-dropdown-icon-color: var(--oscd-base01);

  --mdc-typography-font-family: var(--oscd-text-font);
  --mdc-icon-font: var(--oscd-icon-font);
}

abbr {
  text-decoration: none;
  border-bottom: none;
}