@font-face {
  font-family: "League Spartan";

  src:
    url("/fonts/League_Spartan/LeagueSpartan-VariableFont_wght.ttf")
    format("truetype");

  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


:root {

  /* =========================================================
   * TYPOGRAPHY
   * ========================================================= */

  --brand-font-family:
    "League Spartan",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;


  /* =========================================================
   * CORE COLORS
   *
   * main = asiakkaan pää-/brändiväri
   * button = toimintopainikkeiden väri
   * ========================================================= */

  --brand-main-color:
    #031227;

  --brand-button-color:
    #f46421;

  --brand-button-hover-color:
    #ff7534;

  --brand-button-text-color:
    #ffffff;


  --brand-background-color:
    #031227;

  --brand-text-color:
    #ffffff;

  --brand-muted-text-color:
    rgba(255, 255, 255, 0.74);


  --brand-secondary-color:
    #0d335c;

  --brand-secondary-text-color:
    #ffffff;


  --brand-danger-color:
    #a63f33;

  --brand-danger-text-color:
    #ffffff;


  --brand-success-color:
    #43895c;

  --brand-success-text-color:
    #ffffff;


  --brand-border-color:
    rgba(255, 255, 255, 0.14);


  /* =========================================================
   * COMPATIBILITY ALIASES
   *
   * Näitä voi käyttää uusissa komponenteissa asteittain,
   * jos niissä on jo käytössä --brand-primary-color.
   * ========================================================= */

  --brand-primary-color:
    var(--brand-button-color);

  --brand-primary-hover-color:
    var(--brand-button-hover-color);

  --brand-primary-text-color:
    var(--brand-button-text-color);


  /* =========================================================
   * BACKGROUND
   * ========================================================= */

  --brand-background-image:
    none;

  --brand-background-size:
    cover;

  --brand-background-position:
    center center;

  --brand-background-repeat:
    no-repeat;


  --brand-background-overlay:
    linear-gradient(
      180deg,
      rgba(2, 13, 31, 0.06) 0%,
      rgba(2, 13, 31, 0.12) 50%,
      rgba(2, 13, 31, 0.30) 100%
    );


  /* =========================================================
   * LOGO
   * ========================================================= */

  --brand-logo-image:
    none;

  --brand-logo-width:
    180px;

  --brand-logo-height:
    58px;

  --brand-logo-left:
    28px;

  --brand-logo-bottom:
    24px;

  --brand-logo-filter:
    none;

  --brand-logo-opacity:
    1;


  /* =========================================================
   * RADII
   * ========================================================= */

  --brand-radius-sm:
    12px;

  --brand-radius-md:
    18px;

  --brand-radius-lg:
    28px;

  --brand-radius-pill:
    999px;


  /* =========================================================
   * SHADOWS
   * ========================================================= */

  --brand-shadow-sm:
    0 5px 18px rgba(0, 0, 0, 0.20);

  --brand-shadow-md:
    0 10px 30px rgba(0, 0, 0, 0.26);

  --brand-shadow-lg:
    0 24px 70px rgba(0, 0, 0, 0.32);


  /* =========================================================
   * PANEL / SURFACE
   * ========================================================= */

  --brand-surface-color:
    rgba(3, 18, 39, 0.78);

  --brand-panel-background:
    var(--brand-surface-color);

  --brand-panel-border:
    1px solid var(--brand-border-color);

  --brand-panel-radius:
    var(--brand-radius-lg);

  --brand-panel-shadow:
    var(--brand-shadow-lg);

  --brand-panel-blur:
    18px;


  /* =========================================================
   * BUTTONS
   * ========================================================= */

  --brand-button-height:
    64px;

  --brand-button-radius:
    var(--brand-radius-md);

  --brand-button-shadow:
    var(--brand-shadow-sm);


  --brand-secondary-button-background:
    rgba(255, 255, 255, 0.08);

  --brand-secondary-button-border:
    rgba(255, 255, 255, 0.20);


  /* =========================================================
   * LANGUAGE BUTTONS
   * ========================================================= */

  --language-button-background:
    rgba(255, 255, 255, 0.07);

  --language-button-background-hover:
    rgba(255, 255, 255, 0.13);

  --language-button-border:
    rgba(255, 255, 255, 0.14);

  --language-button-text:
    var(--brand-text-color);


  /* =========================================================
   * LOGIN
   * ========================================================= */

  --login-panel-width:
    640px;

  --login-panel-padding:
    48px;

  --login-button-height:
    68px;

  --login-button-radius:
    var(--brand-button-radius);


  /* =========================================================
   * ICONS / TOGGLES
   * ========================================================= */

  --icon-filter:
    none;

  --brand-toggle-background:
    var(--brand-main-color);


  /* =========================================================
   * POWERED BY
   * ========================================================= */

  --powered-by-text-color:
    rgba(255, 255, 255, 0.68);

  --powered-by-logo-image:
    none;

  --powered-by-logo-width:
    110px;

  --powered-by-logo-height:
    28px;


  /* =========================================================
   * CHINA
   * ========================================================= */

  --china-footer-color:
    rgba(255, 255, 255, 0.68);

}