/*
||------------------------VARS--------------------------||
||                                                      ||
||          path: /css-styles/style-vars.css            ||
||                                                      ||
||----------------------css-style-----------------------||

content:
- FONTS
- COLORS
base
button
accent
header / footer
neutral
effects
fonts
text width
- BODY
*/

/* ------------------ FONTS ------------------ */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-weight: 400;
  src: url("/Schriftarten/roboto-v48-latin/roboto-v48-latin-regular.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Charm";
  font-weight: 400;
  src: url("Schriftarten/Charm/Charm-Regular.ttf") format("truetype");
}

/* ------------------ COLORS ------------------ */
:root {
  /* base */
  --color-surface-dark: #0a294f;
  --color-surface: rgb(27, 96, 149);
  --color-surface-alt: #0e4c7c;

  /* button */
  --color-button: #1b4b85;
  --color-button-hover: #20569a;

  /* accent */
  --color-accent: #ca7f29;
  --color-accent-dark: #c26d0c;
  --color-accent-gray: #222d0c;

  /* header / footer */
  --color-header-top: #05336a;
  --color-header-bootom: rgb(32, 86, 128);
  --color-footer-top: #072f5f;
  --color-footer-bottom: #061e3b;

  /* text */
  --color-headline: #ffffff;
  --color-text: #ffffff;
  --color-text-dark: #000000;
  --color-text-muted: rgba(255, 255, 255, 0.7);

  /* neutral */
  --color-background: #eee;

  /* effects */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-extra-extra-extra-extra-extra-extra-large: 0 800px 100px
    rgba(0, 0, 0, 1000);

  /* fonts */
  --font-main: "Roboto", sans-serif;
  --font-accent: "Charm", cursive;

  /* text width */
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 2.2rem;
}

/* ------------------ BODY ------------------ */
body {
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
}