/* SETTINGS

  Base settings for all CSS files (custom properties).

*/

/* === FONTS ============================================================= */

/* AlternateGotNo3D - latin */
@font-face {
  font-display: block;
  font-family: 'Alternate Gothic No3 D';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/alternategotno3d.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: bold;
  src: url('./fonts/opensans-bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: normal;
  src: url('./fonts/opensans-regular.ttf') format('truetype');
}

/* === SETTINGS ============================================================= */

:root {
  /* --- THEME -------------------------------------------------------------- */

  /* AVAILABLE COLORS */
  --color-black: #06001e; /* Background (.SECONDARY) */
  --color-white: #ffffff; /* Background (BODY), Logo */
  --color-dark: #212134;
  --color-light: #f4f1ff; /* Background (.ALTERNATE) */
  --color-gray--1: #f4f1ff; /* Background (INPUT, BUTTON) */
  --color-gray--2: #e0dce8; /* formerly Background (.ALTERNATE) */
  --color-gray--3: #c8c2d9; /* Background (.ICONBOX) */
  --color-gray--4: #9f9caf; /* Text (.SECONDARY) */
  --color-gray--5: #7e7a91; /* 06001e */
  --color-gray--6: #4d4c68; /* Border (INPUT) */
  --color-gray--7: #403a60; /* Text (INPUT) */
  --color-gray--8: #383651; /* Text */
  --color-gray--9: #2b2b3a; /* Background (Starfield) */
  --color-gray--10: #212134; 
  --color-gray--11: #1e1a34;
  --color-red--uber: #ce0058; /* Highlight */
  --color-red--dark: #6c1d45; /* Highlight (dark), Status (error) */
  --color-red--light: #a50050; /* Highlight (light / active / hover) */
  --color-green: #47d7ac; /* Status (okay) */
  --color-yellow: #fffc9c; /* Status (warning) */
  --color-blue: #28c2ff; /* Status (info) */
  --color-pink: #ff0068; /* Status (alert) */
  --color-orange: #ffca3a; /* nice to have */

  /* HIGHLIGHTS */
  --color-accent: var(--color-red--uber);
  --color-accent--light: var(--color-red--light);
  --color-accent--dark: var(--color-red--dark);
  --color-alternate: var(--color-light);
  --color-secondary: var(--color-black);

  /* LINKS */
  --color-link: var(--color-accent);
  --color-visited: var(--color-link);
  --color-hover: var(--color-accent--uber);
  --color-active: var(--color-accent--dark);

  /* BACKGROUND */
  --color-background: var(--color-white);
  --color-background--button: var(--color-gray--1);
  --color-background--form: var(--color-white);

  /* TEXT */
  --color-header: var(--color-gray--9);
  --color-text: var(--color-black);
  --color-text--button: var(--color-red--uber);
  --color-text--form: var(--color-gray--7);

  /* BORDER */
  --color-border: var(--color-gray--6);
  --color-border--button: var(--color-red--uber);
  --color-border--form: var(--color-gray--6);

  /* MISC */
  --color-note--error: var(--color-red--dark);
  --color-note--notice: var(--color-yellow);
  --color-note--success: var(--color-green);

  /* --- TYPOGRAPHT --------------------------------------------------------- */

  /* FONT FAMILIES */
  --font-family: var(--font-family--default);
  --font-family--default: "Open Sans";
  --font-family--header: "Alternate Gothic No3 D";
  --font-family--light: "Open Sans";
  --font-family--condensed: "Open Sans";
  --font-family--mono: monospace, monospace;

  /* FONT SIZES & WEIGHS */
  --font-size--default: 16px;
  --font-size--large-4: 2.5rem; /* ~ 40px */
  --font-size--large-3: 2rem; /* ~ 32px */
  --font-size--large-2: 1.5rem; /* ~ 24px */
  --font-size--large-1: 1.375rem; /* ~ 22px */
  --font-size--large: 1.375rem; /* ~ 22px */
  --font-size--larger: 1.15rem; /* ~ 18px */
  --font-size: 1rem; /* ~ 16px */
  --font-size--smaller: 0.9rem; /* ~ 14,5px */
  --font-size--small: 0.8rem; /* ~ 13px */
  --font-size--small-1: 0.8rem; /* ~ 13px */
  --font-size--small-2: 0.7rem; /* ~ 11,5px */
  --font-size--small-3: 0.6rem; /* ~ 10px */
  --font-size--small-4: 0.5rem; /* ~ 8px */
  --font-weight: var(--font-weight--default);
  --font-weight--default: 400;
  --font-weight--bold: 600;

  /* LINE HEIGHT */
  --line-height--default: 1.56;
  --line-height--small: calc(var(--line-height--default) * 0.65);
  --line-height: calc(var(--line-height--default) * 1);
  --line-height--large: calc(var(--line-height--default) * 1.15);
  --line-height--header: var(--line-height--small);

  /* --- SPACING & WIDTHS --------------------------------------------------- */

  --spacing--default: 2rem; /* ~ 32px */
  --spacing--tiny: calc(var(--spacing--default) * 0.25); /* ~ 8px */
  --spacing--small: calc(var(--spacing--default) * 0.5); /* ~ 16px */
  --spacing--smaller: calc(var(--spacing--default) * 0.75); /* ~ 24px */
  --spacing: calc(var(--spacing--default) * 1); /* ~ 32px */
  --spacing--larger: calc(var(--spacing--default) * 1.25); /* ~ 40px */
  --spacing--large: calc(var(--spacing--default) * 1.5); /* ~ 48px */
  --spacing--huge: calc(var(--spacing--default) * 1.75); /* ~ 56px */
  --spacing--header: var(--spacing--tiny);

  /* MIN / MAX */
  --width-min: 320px;
  --width-max: 1400px;

  /* BLOCK-PADDING */
  --padding--vertical: calc(var(--spacing) * 2); /* ~ 64px */
  --padding--horizontal: var(--spacing); /* ~ 32px */

  /* --- MISC --------------------------------------------------------------- */

  /* BORDER */
  --border: var(--border-width, 1px) var(--border-style, solid) var(--color-border);
  --border-padding: var(--spacing--tiny);
}