@layer config,common;

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

@layer config {
  @font-face {
    font-family: "urbanist";
    font-weight: 400;
    font-style: normal;
    src: url("/theme/oria/fonts/galano-grotesque/galanogrotesque-regular-webfont.woff2") format("woff2");
  }

  @font-face {
    font-family: "urbanist";
    font-weight: 700;
    font-style: normal;
    src: url("/theme/oria/fonts/galano-grotesque/galanogrotesque-bold-webfont.woff2") format("woff2");
  }

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

    --colors-base-primary: #F00050;
    --colors-coral-700: #A90038;

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

    --colors-background-primary: #000518;
    --colors-background-secondary: #021041;

    --colors-outlined-primary: var(--colors-base-primary);
    --colors-outlined-secondary-05: #F5F5F880;
    --colors-outlined-secondary-01: #F5F5F81A;

    --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: var(--colors-coral-700);
    --button-primary-hover-border: var(--colors-coral-700);


    --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: var(--colors-coral-700);

    --button-secondary-disabled-color: #85002C;
    --button-secondary-disabled-background: transparent;
    --button-secondary-disabled-border: #85002C;

    --logo-height: 58px;
  }
}