/* mailflow design tokens — Light / Dark */

@font-face {
  font-family: "Greycliff CF";
  src: url("../fonts/GreycliffCF-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Greycliff CF";
  src: url("../fonts/GreycliffCF-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Greycliff CF";
  src: url("../fonts/GreycliffCF-DemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Greycliff CF";
  src: url("../fonts/GreycliffCF-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Greycliff CF", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg-page: #F3F5F8;
  --bg: #FFFFFF;
  --bg-muted: #EEF1F5;
  --border: #E5E9EF;
  --text-primary: #1F2937;
  --text-secondary: #8B949E;
  --text-muted: #5B6572;

  --accent: #2383E2;
  --accent-bg: #E7F3FF;
  --accent-soft: #F0F7FF;

  --success: #0F7B6C;
  --success-bg: #DDEDDC;
  --warn: #9A6700;
  --warn-bg: #FBF3DB;
  --danger: #E03E3E;
  --danger-bg: #FDEBEC;
  --purple: #6940A5;
  --purple-bg: #F6F3F9;

  --learning: #C2410C;
  --learning-bg: #FFF4ED;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-card: 10px;
  --sidebar-w: 220px;
  --topbar-h: 56px;
}

html[data-theme="dark"] {
  --bg-page: #0F1419;
  --bg: #1A1F26;
  --bg-muted: #242B33;
  --border: #2E3640;
  --text-primary: #E8ECF0;
  --text-secondary: #8B949E;
  --text-muted: #A0A8B0;

  --accent: #5BA9F0;
  --accent-bg: #1A2F45;
  --accent-soft: #152636;

  --success: #3D9B8A;
  --success-bg: #1A2F2B;
  --warn: #D4A017;
  --warn-bg: #2F2818;
  --danger: #F07178;
  --danger-bg: #3A1F22;
  --purple: #A78BDA;
  --purple-bg: #2A2435;

  --learning: #FB923C;
  --learning-bg: #2A1F14;
}

/* Logos: genau eines sichtbar */
.logo-light { display: block; }
.logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark { display: block; }
html[data-theme="dark"] .theme-ico-light { display: none; }
html[data-theme="dark"] .theme-ico-dark { display: inline-flex; }
.theme-ico-dark { display: none; }
.theme-ico-light { display: inline-flex; }