@layer config, common, specific;

@import "/styles/common.css" layer(common);

@layer config {

  @font-face {
    font-family: "urbanist";
    font-weight: 400;
    font-style: normal;
    src: url("/theme/goldenPalace/fonts/averta/avertastd-regular-webfont.woff2") format("woff2");
  }

  @font-face {
    font-family: "urbanist";
    font-weight: 700;
    font-style: normal;
    src: url("/theme/goldenPalace/fonts/averta/avertastd-bold-webfont.woff2") format("woff2");
  }

  :root {
    --font: urbanist, Helvetica, Arial, sans-serif;
    --fonts-body: var(--font);
    --fonts-heading: var(--font);

    --colors-base-primary: #BA933B;

    --colors-text-primary: #FAFAFA;
    --colors-text-secondary: #A3A3A3;

    --colors-background-primary: #141414;
    --colors-background-secondary: #262626;

    --colors-outlined-primary: var(--colors-base-primary);
    --colors-outlined-secondary-05: #FAFAFA80;
    --colors-outlined-secondary-01: #FAFAFA1A;

    --button-primary-default-color: var(--colors-text-primary);
    --button-primary-default-background: var(--colors-base-primary);
    --button-primary-default-border: var(--colors-base-primary);

    --button-primary-hover-color: var(--colors-text-primary);
    --button-primary-hover-background: #90722E;
    --button-primary-hover-border: #90722E;

    --button-secondary-default-color: var(--colors-text-primary);
    --button-secondary-default-background: transparent;
    --button-secondary-default-border: var(--colors-base-primary);

    --button-secondary-hover-color: var(--colors-text-primary);
    --button-secondary-hover-background: var(--colors-background-secondary);
    --button-secondary-hover-border: #90722E;

    --button-secondary-disabled-color: #53421A;
    --button-secondary-disabled-background: transparent;
    --button-secondary-disabled-border: #53421A;

    --logo-height: 38px;
  }
}

@layer specific {
  dialog button {
    font-size: 28px;
  }
}