html.dscc {
  &:root {

    /* Brand Colours */
    --brand-background: #000;
    --brand-dscc-neon: #FF2031;
    --brand-dscc-dark: #1a2328;
    --brand-dscc-dark-60: rgb(26, 35, 40, 0.6);

    --color-palette-branding-normal: var(--brand-dscc-neon);

    --ui-primary: var(--brand-dscc-neon);
    --ui-primary-hover: color-mix(in oklab, var(--ui-primary) 60%, var(--color-white) 40%);
    --ui-primary-disabled: color-mix(in oklab, var(--ui-primary) 20%, transparent 80%);
    --ui-error: #FF2031;
    --ui-bg: var(--brand-background);

    --color--accent: var(--brand-dscc-neon);
    --input-buttons-primary-bg-default: var(--ui-primary);
    --input-buttons-primary-text-default: var(--color-black);
    --input-buttons-primary-bg-hover: var(--ui-primary-hover);
    --input-buttons-primary-text-hover: var(--color-black);
    --input-buttons-primary-bg-disabled: var(--ui-primary-disabled);
    --input-buttons-primary-text-disabled: var(--color-black);

    /* Fonts */
    --primary-font-family: 'Archivo', Helvetica, Arial, sans-serif;

    & body {
      font-family: var(--primary-font-family);
      background-color: var(--brand-background);

      .content strong,
      .content a {
        color: var(--ui-primary);

        & a {
          
          &:hover {
            text-decoration: underline;
            color: var(--ui-primary-hover);
          }
        }
      }
    }

    & button.text-white {
      color: var(--brand-dscc-dark);
    }

    :where(.i-lucide\:check) {
      background-color: var(--brand-dscc-dark) !important;
    }
  }

  /* Login */
  & .login-wrapper {
      --_background-image:
          radial-gradient(circle, var(--brand-dscc-dark-60), var(--brand-dscc-dark) 80%),
          url('/images/dscc/background-header.jpg');
      background-image: var(--_background-image);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

    .card {
      --_banner: none;
    }

    .form-wrapper {
      & .login::before {
        background-color: var(--brand-dscc-dark-60);
        --tw-backdrop-blur: blur(4px);
        backdrop-filter: var(--tw-backdrop-blur);
      }
    }
  }
}

/* Local Deep Silver Fonts */
@font-face {
  font-family: 'Oswald';
  src: url('/fonts/deepsilver/oswald-extralight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/fonts/deepsilver/oswald-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/fonts/deepsilver/oswald-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/fonts/deepsilver/oswald-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/fonts/deepsilver/oswald-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/fonts/deepsilver/oswald-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/deepsilver/archivo-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/deepsilver/archivo-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/deepsilver/archivo-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/deepsilver/archivo-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}