/*
  Design-Variablen – Glootze Lounge
  Farben, Schriften, Abstände und Rundungen an einem Ort.
  Für Designänderungen reicht es meist, nur diese Datei anzupassen.
*/

/* Schriften werden vom eigenen Server geladen (kein Google-Server, DSGVO-freundlich) */
@font-face {
  font-family: "Round 8";
  src: url("../fonts/round8-eight-webfont.woff2") format("woff2"),
       url("../fonts/round8-eight-webfont.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Lounge-Farben aus dem Figma-Entwurf */
  --color-night: #261937;          /* Aubergine – Hintergrund */
  --color-night-2: #33244A;        /* etwas heller – Flächen auf dem Hintergrund */
  --color-lilac: #F3E0FE;          /* Flieder – Akzent, Karten, Buttons */
  --color-lilac-2: #E2C6F7;        /* Flieder dunkler – Hover, Rahmen */

  --color-bg: var(--color-night);
  --color-on-bg: var(--color-lilac);
  --color-on-bg-muted: rgba(243, 224, 254, 0.72);
  --color-line-on-bg: rgba(243, 224, 254, 0.28);

  --color-surface: var(--color-lilac);
  --color-on-surface: var(--color-night);
  --color-on-surface-muted: rgba(38, 25, 55, 0.68);
  --color-line-on-surface: rgba(38, 25, 55, 0.16);

  --color-placeholder: #3B2B52;
  --color-warning-bg: #FFE3D6;
  --color-warning: #8A2A0A;

  /* Schriften */
  --font-display: "Round 8", "Arial Black", Impact, sans-serif;   /* Buttons, Bereichsname, Wortmarke */
  --font-text: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 22px;

  /* Abstände (8er-Raster) */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 48px;

  /* Rundungen */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 25px;
  --radius-pill: 100px;

  /* Inhaltsbreite */
  --content-max: 1440px;
}