:root {
  --brand-coloraccent: rgba(242, 169, 0, 1);
  --brand-colordark: rgba(39, 37, 37, 1);
  --brand-colorlight: rgba(238, 236, 232, 1);
  --m3-body-large-font-family: Hoves-Pro, Helvetica;
  --m3-body-large-font-size: 16px;
  --m3-body-large-font-style: normal;
  --m3-body-large-font-weight: 400;
  --m3-body-large-letter-spacing: 0.5px;
  --m3-body-large-line-height: 24px;
  --m3-body-medium-font-family: Hoves-Pro, Helvetica;
  --m3-body-medium-font-size: 14px;
  --m3-body-medium-font-style: normal;
  --m3-body-medium-font-weight: 400;
  --m3-body-medium-letter-spacing: 0.25px;
  --m3-body-medium-line-height: 20px;
  --m3-body-small-font-family: Hoves-Pro, Helvetica;
  --m3-body-small-font-size: 12px;
  --m3-body-small-font-style: normal;
  --m3-body-small-font-weight: 400;
  --m3-body-small-letter-spacing: 0.4000000059604645px;
  --m3-body-small-line-height: 16px;
  --m3-elevation-dark-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px
    rgba(0, 0, 0, 0.15);
  --m3-elevation-dark-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px
    rgba(0, 0, 0, 0.15);
  --m3-label-large-font-family: Hoves-Pro, Helvetica;
  --m3-label-large-font-size: 14px;
  --m3-label-large-font-style: normal;
  --m3-label-large-font-weight: 500;
  --m3-label-large-letter-spacing: 0.10000000149011612px;
  --m3-label-large-line-height: 20px;
  --m3-label-large-prominent-font-family: Hoves-Pro, Helvetica;
  --m3-label-large-prominent-font-size: 14px;
  --m3-label-large-prominent-font-style: normal;
  --m3-label-large-prominent-font-weight: 700;
  --m3-label-large-prominent-letter-spacing: 0.10000000149011612px;
  --m3-label-large-prominent-line-height: 20px;
  --m3-schemes-on-surface-variant: rgba(77, 70, 57, 1);
  --m3-schemes-surface-container-high: rgba(231, 233, 223, 1);
  --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08);
  --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12);
  --m3-title-medium-font-family: Hoves-Pro, Helvetica;
  --m3-title-medium-font-size: 16px;
  --m3-title-medium-font-style: normal;
  --m3-title-medium-font-weight: 700;
  --m3-title-medium-letter-spacing: 0.15000000596046448px;
  --m3-title-medium-line-height: 24px;
  --statusstrokecurtailed: rgba(213, 96, 13, 0.5);
  --tokens-colors-info-sky: rgba(0, 143, 255, 1);
  --tokens-colors-neutral-1000: rgba(13, 21, 30, 1);
  --tokens-colors-neutral-300: rgba(191, 187, 182, 1);
  --tokens-colors-neutral-brite: rgba(242, 234, 225, 1);
  --tokens-container-dark: var(--tokens-colors-neutral-1000);
  --variable-collection-accent-01: rgba(242, 169, 0, 1);
  --variable-collection-accent-02: rgba(246, 195, 76, 1);
  --variable-collection-accent-03: rgba(250, 221, 152, 1);
  --variable-collection-container-list-item-hover: rgba(242, 169, 0, 0.2);
  --variable-collection-container-list-item-hover-duplicate: rgba(
    242,
    169,
    0,
    0.2
  );
  --variable-collection-grey-01: rgba(238, 236, 232, 1);
  --variable-collection-grey-01-duplicate: rgba(238, 236, 232, 1);
  --variable-collection-grey-02: rgba(205, 203, 200, 1);
  --variable-collection-grey-03: rgba(172, 170, 168, 1);
  --variable-collection-grey-04: rgba(106, 104, 104, 1);
  --variable-collection-grey-05: rgba(73, 71, 72, 1);
  --variable-collection-grey-06: rgba(39, 37, 37, 1);
  --variable-collection-grey-06-duplicate: rgba(39, 37, 37, 1);
  --variable-collection-status-curtailed: rgba(213, 96, 13, 1);
  --variable-collection-status-live: rgba(0, 143, 255, 1);
  --variable-collection-status-offline: rgba(236, 49, 49, 1);
  --variable-collection-status-overclocking: rgba(4, 247, 110, 1);
  --variable-collection-status-underclocking: rgba(242, 169, 0, 1);
  --variable-collection-stroke-chip-curtailed: rgba(242, 169, 0, 0.5);
  --variable-collection-stroke-chip-live: rgba(1, 199, 237, 0.5);
  --variable-collection-stroke-chip-offline: rgba(190, 40, 40, 0.5);
  --variable-collection-stroke-chip-overclocking: rgba(4, 247, 110, 0.5);
  --variable-collection-text-primary: var(--variable-collection-grey-01);
  --variable-collection-text-secondary: var(--variable-collection-grey-03);
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-m3-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-theme="light"] {
  --m3-schemes-on-surface-variant: rgba(77, 70, 57, 1);
  --m3-schemes-surface-container-high: rgba(231, 233, 223, 1);
  --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08);
  --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12);
}

[data-theme="light-high-contrast"] {
  --m3-schemes-on-surface-variant: rgba(41, 35, 24, 1);
  --m3-schemes-surface-container-high: rgba(231, 233, 223, 1);
  --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08);
  --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12);
}

[data-theme="light-medium-contrast"] {
  --m3-schemes-on-surface-variant: rgba(73, 66, 53, 1);
  --m3-schemes-surface-container-high: rgba(231, 233, 223, 1);
  --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08);
  --m3-state-layers-on-primary-opacity-12: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] {
  --m3-schemes-on-surface-variant: rgba(208, 197, 180, 1);
  --m3-schemes-surface-container-high: rgba(40, 43, 36, 1);
  --m3-state-layers-on-primary-opacity-08: rgba(56, 30, 114, 0.08);
  --m3-state-layers-on-primary-opacity-12: rgba(56, 30, 114, 0.12);
}