@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

:root {
  /* Customization */
  --space-grotesk: "Space Grotesk", sans-serif;

  /* Typography */
  --pf-t--global--font--family--100: var(--space-grotesk);
  --pf-t--global--font--family--200: var(--space-grotesk);
  --pf-t--global--font--family--300: var(--space-grotesk);
  --pf-t--global--font--family--body--legacy: var(--space-grotesk);
  --pf-t--global--font--family--heading--legacy: var(--space-grotesk);
  --pf-t--global--font--family--mono--legacy: var(--space-grotesk);
  --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--4xl);

  /* Border */
  --pf-t--global--border--color--100: var(--pf-t--color--green--30);
  --pf-t--global--border--color--200: var(--pf-t--color--green--40);
  --pf-t--global--border--color--300: var(--pf-t--color--green--50);
  --pf-t--global--border--color--50: var(--pf-t--color--green--20);
  --pf-t--global--border--color--default: rgba(50, 49, 53, 0.2);

  --pf-t--global--text--color--100: #323135;
  --pf-t--global--text--color--200: #323135;

  /* Green */
  --pf-t--color--green--10: #f7fdec;
  --pf-t--color--green--20: #dff6b3;
  --pf-t--color--green--30: #c0ed68;
  --pf-t--color--green--40: #b0e842;
  --pf-t--color--green--50: #8dba35;
  --pf-t--color--green--60: #6a8c28;
  --pf-t--color--green--70: #364714;

  /* Purple */
  --pf-t--color--purple--10: #f5effd;
  --pf-t--color--purple--20: #d6bff7;
  --pf-t--color--purple--30: #c2a0f2;
  --pf-t--color--purple--40: #ad80ee;
  --pf-t--color--purple--50: #9960ea;
  --pf-t--color--purple--60: #7d4ec1;
  --pf-t--color--purple--70: #462970;

  /* Brand */
  --pf-t--global--color--brand--100: var(--pf-t--color--purple--40);
  --pf-t--global--color--brand--200: var(--pf-t--color--purple--50);
  --pf-t--global--color--brand--300: var(--pf-t--color--purple--60);

  --pf-t--global--color--status--info--100: var(--pf-t--color--blue--50);
  --pf-t--global--color--status--info--200: var(--pf-t--color--blue--60);
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--40);
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--50);

  /* Link */
  --pf-t--global--text--color--link--100: var(--pf-t--color--purple--50);
  --pf-t--global--text--color--link--200: var(--pf-t--color--purple--60);
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--70);

  --pf-t--global--dark--text--color--link--100: var(--pf-t--color--purple--50);
  --pf-t--global--dark--text--color--link--200: var(--pf-t--color--purple--60);
  --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--70);

  /* Background */
  --pf-t--global--background--color--secondary--default: #fafaf9;
  --pf-t--global--background--color--action--plain--hover: #fafaf9;

  .pf-v6-c-menu-toggle {
    --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--color--brand--200);
  }

  /* Component Menu */
  .pf-v6-c-menu {
    --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(
      --pf-t--color--green--40
    );
  }
  .pf-v6-c-menu-toggle.pf-m-full-width {
    max-width: calc(
      100% -
        (
          var(--pf-v6-c-menu-toggle--PaddingInlineStart) +
            var(--pf-v6-c-menu-toggle--PaddingInlineEnd)
        )
    );
  }

  .pf-v6-c-nav__link {
    /* --pf-v6-c-nav__link--Color: #323135; */
    /* font-weight: var(--pf-v6-c-nav__link--FontWeight, inherit); */
    max-width: calc(
      100% -
        (
          var(--pf-v6-c-nav__link--PaddingInlineStart) +
            var(--pf-v6-c-nav__link--PaddingInlineEnd)
        )
    );
  }

  .pf-v6-c-nav__link.pf-m-current,
  .pf-v6-c-nav__link.pf-m-current:hover {
    --pf-v6-c-nav__link--FontWeight: bold;
    --pf-v6-c-nav__link--m-current--Color: var(
      --pf-t--global--color--brand--200
    );
  }

  .pf-v6-c-tabs__item.pf-m-current {
    font-weight: bold;
  }
}

:root {
  /* 8. Pallette.json */
  --pf-v5-global--palette--green-50: #f7fdec;
  --pf-v5-global--palette--green-100: #dff6b3;
  --pf-v5-global--palette--green-200: #c0ed68;
  --pf-v5-global--palette--green-300: #b0e842;
  --pf-v5-global--palette--green-400: #a2cb3c;
  --pf-v5-global--palette--green-500: #8dba35;
  --pf-v5-global--palette--green-600: #6a8c28;
  --pf-v5-global--palette--green-700: #4e631c;
  --pf-v5-global--palette--purple-50: #f5effd;
  --pf-v5-global--palette--purple-100: #d6bff7;
  --pf-v5-global--palette--purple-200: #c2a0f2;
  --pf-v5-global--palette--purple-300: #ad80ee;
  --pf-v5-global--palette--purple-400: #9960ea;
  --pf-v5-global--palette--purple-500: #7d4ec1;
  --pf-v5-global--palette--purple-600: #5f3d97;
  --pf-v5-global--palette--purple-700: #462970;
}

/* Dark Mode */
:where(.pf-v5-theme-dark) {
  --pf-v5-global--link--Color: var(--pf-t--color--purple--50);
  --pf-v5-global--link--Color--hover: var(--pf-t--color--purple--60);
  --pf-v5-global--link--Color--visited: var(--pf-t--color--purple--70);
}

:root:where(.pf-v6-theme-dark) {
  --pf-t--color--purple--80: #3a1f5e;
  --pf-t--color--purple--90: #2b1647;
  --pf-t--color--purple--95: #1d102f;
  --pf-t--global--dark--border--color--100: var(--pf-t--color--green--50);
  --pf-t--global--dark--border--color--200: var(--pf-t--color--green--40);
  --pf-t--global--dark--border--color--50: var(--pf-t--color--green--60);
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--purple--50);
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--purple--40);
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--purple--30);
  --pf-t--global--background--color--primary--default: #080413;

  --pf-t--global--border--color--default: rgba(255, 255, 255, 0.2);

  /* Background */
  --pf-t--global--background--color--secondary--default: #100827;
  --pf-t--global--background--color--action--plain--hover: #080413;

  .pf-v6-c-masthead__logo > * {
    filter: brightness(0) invert(1);
  }

  .pf-v6-c-form-control {
    --pf-v6-c-form-control--BackgroundColor: #080413;
  }

  .pf-v6-c-nav__link:hover,
  .pf-v6-c-nav__link.pf-m-hover,
  .pf-v6-c-nav__link:focus {
    --pf-v6-c-nav__link--hover--BackgroundColor: #080413;
  }

  .pf-v6-c-nav__link.pf-m-current,
  .pf-v6-c-nav__link.pf-m-current:hover {
    --pf-v6-c-nav__link--m-current--BackgroundColor: #080413;
  }

  .pf-v6-c-menu-toggle {
    --pf-v6-c-menu-toggle--BackgroundColor: #080413;
  }

  .pf-v6-c-button.pf-m-primary {
    --pf-v6-c-button--m-primary--Color: #ffffff;
    --pf-v6-c-button--hover--Color: #ffffff;
  }
}