:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-background-color: #FFFFFF;
  --pico-color: #0A0A0A;

  --pico-h1-color: #0A0A0A;
  --pico-h2-color: #0A0A0A;
  --pico-h3-color: #0A0A0A;
  --pico-h4-color: #0A0A0A;
  --pico-h5-color: #0A0A0A;
  --pico-h6-color: #0A0A0A;

  --pico-muted-color: #525252;
  --pico-muted-border-color: #E5E5E5;

  --pico-primary: #6D28D9;
  --pico-primary-background: #7C3AED;
  --pico-primary-border: #7C3AED;
  --pico-primary-hover: #5B21B6;
  --pico-primary-hover-background: #6D28D9;
  --pico-primary-hover-border: #6D28D9;
  --pico-primary-focus: #DDD6FE;
  --pico-primary-inverse: #FFFFFF;
  --pico-primary-underline: #6D28D9;
  --pico-primary-hover-underline: #5B21B6;

  --pico-secondary: #525252;
  --pico-secondary-background: #525252;
  --pico-secondary-border: #525252;
  --pico-secondary-hover: #404040;
  --pico-secondary-hover-background: #404040;
  --pico-secondary-hover-border: #404040;
  --pico-secondary-focus: #E5E5E5;
  --pico-secondary-inverse: #FFFFFF;

  --pico-contrast: #0A0A0A;
  --pico-contrast-background: #0A0A0A;
  --pico-contrast-border: #0A0A0A;
  --pico-contrast-hover: #000000;
  --pico-contrast-hover-background: #000000;
  --pico-contrast-hover-border: #000000;
  --pico-contrast-inverse: #FFFFFF;

  --pico-form-element-background-color: #FFFFFF;
  --pico-form-element-selected-background-color: #F5F5F5;
  --pico-form-element-border-color: #D4D4D4;
  --pico-form-element-color: #0A0A0A;
  --pico-form-element-placeholder-color: #737373;
  --pico-form-element-active-background-color: #FFFFFF;
  --pico-form-element-active-border-color: #7C3AED;
  --pico-form-element-focus-color: #DDD6FE;
  --pico-form-element-disabled-background-color: #F5F5F5;
  --pico-form-element-disabled-border-color: #E5E5E5;
  --pico-form-element-disabled-opacity: 0.6;

  --pico-form-element-invalid-border-color: #DC2626;
  --pico-form-element-invalid-active-border-color: #DC2626;
  --pico-form-element-invalid-focus-color: #DC2626;
  --pico-form-element-valid-border-color: #16A34A;
  --pico-form-element-valid-active-border-color: #16A34A;
  --pico-form-element-valid-focus-color: #16A34A;

  --pico-code-background-color: #F5F5F5;
  --pico-code-color: #0A0A0A;
  --pico-code-kbd-background-color: #0A0A0A;
  --pico-code-kbd-color: #FFFFFF;

  --pico-card-background-color: #FAFAFA;
  --pico-card-border-color: #E5E5E5;
  --pico-card-sectioning-background-color: #FFFFFF;

  --pico-mark-background-color: #EDE9FE;
  --pico-mark-color: #4C1D95;

  --pico-border-radius: 14px;
  --pico-font-size: 16px;
  --pico-line-height: 1.55;
}

[data-theme=dark] {
  --pico-background-color: #0A0A0A;
  --pico-color: #FAFAFA;

  --pico-h1-color: #FAFAFA;
  --pico-h2-color: #FAFAFA;
  --pico-h3-color: #FAFAFA;
  --pico-h4-color: #FAFAFA;
  --pico-h5-color: #FAFAFA;
  --pico-h6-color: #FAFAFA;

  --pico-muted-color: #A3A3A3;
  --pico-muted-border-color: #262626;

  --pico-primary: #A78BFA;
  --pico-primary-background: #7C3AED;
  --pico-primary-border: #7C3AED;
  --pico-primary-hover: #C4B5FD;
  --pico-primary-hover-background: #6D28D9;
  --pico-primary-hover-border: #6D28D9;
  --pico-primary-focus: #5B21B6;
  --pico-primary-inverse: #FFFFFF;
  --pico-primary-underline: #A78BFA;
  --pico-primary-hover-underline: #C4B5FD;

  --pico-secondary: #A3A3A3;
  --pico-secondary-background: #404040;
  --pico-secondary-border: #404040;
  --pico-secondary-hover: #D4D4D4;
  --pico-secondary-hover-background: #525252;
  --pico-secondary-hover-border: #525252;
  --pico-secondary-focus: #262626;
  --pico-secondary-inverse: #FFFFFF;

  --pico-contrast: #FAFAFA;
  --pico-contrast-background: #FAFAFA;
  --pico-contrast-border: #FAFAFA;
  --pico-contrast-hover: #FFFFFF;
  --pico-contrast-hover-background: #FFFFFF;
  --pico-contrast-hover-border: #FFFFFF;
  --pico-contrast-inverse: #0A0A0A;

  --pico-form-element-background-color: #171717;
  --pico-form-element-selected-background-color: #262626;
  --pico-form-element-border-color: #404040;
  --pico-form-element-color: #FAFAFA;
  --pico-form-element-placeholder-color: #A3A3A3;
  --pico-form-element-active-background-color: #171717;
  --pico-form-element-active-border-color: #8B5CF6;
  --pico-form-element-focus-color: #5B21B6;
  --pico-form-element-disabled-background-color: #262626;
  --pico-form-element-disabled-border-color: #404040;
  --pico-form-element-disabled-opacity: 0.6;

  --pico-form-element-invalid-border-color: #DC2626;
  --pico-form-element-invalid-active-border-color: #DC2626;
  --pico-form-element-invalid-focus-color: #DC2626;
  --pico-form-element-valid-border-color: #16A34A;
  --pico-form-element-valid-active-border-color: #16A34A;
  --pico-form-element-valid-focus-color: #16A34A;

  --pico-code-background-color: #171717;
  --pico-code-color: #FAFAFA;
  --pico-code-kbd-background-color: #FAFAFA;
  --pico-code-kbd-color: #0A0A0A;

  --pico-card-background-color: #171717;
  --pico-card-border-color: #262626;
  --pico-card-sectioning-background-color: #0A0A0A;

  --pico-mark-background-color: #5B21B6;
  --pico-mark-color: #FAFAFA;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --pico-background-color: #0A0A0A;
    --pico-color: #FAFAFA;

    --pico-h1-color: #FAFAFA;
    --pico-h2-color: #FAFAFA;
    --pico-h3-color: #FAFAFA;
    --pico-h4-color: #FAFAFA;
    --pico-h5-color: #FAFAFA;
    --pico-h6-color: #FAFAFA;

    --pico-muted-color: #A3A3A3;
    --pico-muted-border-color: #262626;

    --pico-primary: #A78BFA;
    --pico-primary-background: #7C3AED;
    --pico-primary-border: #7C3AED;
    --pico-primary-hover: #C4B5FD;
    --pico-primary-hover-background: #6D28D9;
    --pico-primary-hover-border: #6D28D9;
    --pico-primary-focus: #5B21B6;
    --pico-primary-inverse: #FFFFFF;
    --pico-primary-underline: #A78BFA;
    --pico-primary-hover-underline: #C4B5FD;

    --pico-secondary: #A3A3A3;
    --pico-secondary-background: #404040;
    --pico-secondary-border: #404040;
    --pico-secondary-hover: #D4D4D4;
    --pico-secondary-hover-background: #525252;
    --pico-secondary-hover-border: #525252;
    --pico-secondary-focus: #262626;
    --pico-secondary-inverse: #FFFFFF;

    --pico-contrast: #FAFAFA;
    --pico-contrast-background: #FAFAFA;
    --pico-contrast-border: #FAFAFA;
    --pico-contrast-hover: #FFFFFF;
    --pico-contrast-hover-background: #FFFFFF;
    --pico-contrast-hover-border: #FFFFFF;
    --pico-contrast-inverse: #0A0A0A;

    --pico-form-element-background-color: #171717;
    --pico-form-element-selected-background-color: #262626;
    --pico-form-element-border-color: #404040;
    --pico-form-element-color: #FAFAFA;
    --pico-form-element-placeholder-color: #A3A3A3;
    --pico-form-element-active-background-color: #171717;
    --pico-form-element-active-border-color: #8B5CF6;
    --pico-form-element-focus-color: #5B21B6;
    --pico-form-element-disabled-background-color: #262626;
    --pico-form-element-disabled-border-color: #404040;
    --pico-form-element-disabled-opacity: 0.6;

    --pico-form-element-invalid-border-color: #DC2626;
    --pico-form-element-invalid-active-border-color: #DC2626;
    --pico-form-element-invalid-focus-color: #DC2626;
    --pico-form-element-valid-border-color: #16A34A;
    --pico-form-element-valid-active-border-color: #16A34A;
    --pico-form-element-valid-focus-color: #16A34A;

    --pico-code-background-color: #171717;
    --pico-code-color: #FAFAFA;
    --pico-code-kbd-background-color: #FAFAFA;
    --pico-code-kbd-color: #0A0A0A;

    --pico-card-background-color: #171717;
    --pico-card-border-color: #262626;
    --pico-card-sectioning-background-color: #0A0A0A;

    --pico-mark-background-color: #5B21B6;
    --pico-mark-color: #FAFAFA;
  }
}

@font-face {
  font-family: "Fredoka";
  src: url("/portal/fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Fredoka", var(--pico-font-family);
}

button, [type=submit], [type=button], [role=button] {
  border-radius: 999px;
}