/* tokens.css – gemeinsame Gestaltungswerte (Website + Markdown-Editor)
   Ruhige Flächen, pro Werkzeug eine eigene Farbe. Schriften liegen lokal. */
@font-face { font-family: "Roboto Slab"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/Roboto-Slab-Bold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/lato-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/lato-bold.woff2") format("woff2"); }

:root {
  --font-display: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-logo: "Roboto Slab", "Rockwell", Georgia, serif;
  --font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Flächen und Text (hell) */
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #eceef6;
  --ink: #1d2433;
  --ink-2: #566077;
  --line: #dde1ee;

  /* Werkzeugfarben: Grundton, kräftiger Text, Tönung */
  --indigo: #5b5bd6;  --indigo-x: #4040b8;  --indigo-t: #ecebfb;   /* Mermaid Studio */
  --teal:   #0e9384;  --teal-x:   #0a6e63;  --teal-t:   #def6f1;   /* Markdown-Editor */
  --amber:  #e8890c;  --amber-x:  #8f5200;  --amber-t:  #fff0d6;   /* Termine und Notizen */
  --rose:   #d63f7a;  --rose-x:   #a02358;  --rose-t:   #fde7f0;   /* Zusammenspiel */
  --green:  #2f9e5b;  --green-x:  #1d7440;  --green-t:  #e1f5e9;   /* Offline, Sicherheit */
  --sky:    #2b86d9;  --sky-x:    #1a62a8;  --sky-t:    #e1f0fc;   /* Start, Dateien */

  --accent: var(--indigo);
  --accent-ink: #ffffff;
  --accent-text: var(--indigo-x);
  --focus: #e8890c;
  --shadow: 0 1px 2px rgba(29, 36, 51, .06), 0 8px 24px -12px rgba(29, 36, 51, .18);
  --hero-1: #e9ecff; --hero-2: #e2f6f2; --hero-3: #fff1dc;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11141d; --surface: #1a1f2d; --surface-2: #232a3b;
    --ink: #e8ebf4; --ink-2: #a5aec4; --line: #2d364a;
    --indigo: #8f8ff0;  --indigo-x: #a9a9f6;  --indigo-t: color-mix(in srgb, #8f8ff0 16%, #1a1f2d);
    --teal:   #3fd0bd;  --teal-x:   #5fe0cf;  --teal-t:   color-mix(in srgb, #3fd0bd 15%, #1a1f2d);
    --amber:  #ffb54a;  --amber-x:  #ffc674;  --amber-t:  color-mix(in srgb, #ffb54a 15%, #1a1f2d);
    --rose:   #ff7fab;  --rose-x:   #ff9fc0;  --rose-t:   color-mix(in srgb, #ff7fab 15%, #1a1f2d);
    --green:  #5fd28b;  --green-x:  #82e0a6;  --green-t:  color-mix(in srgb, #5fd28b 14%, #1a1f2d);
    --sky:    #6cb8ff;  --sky-x:    #92cbff;  --sky-t:    color-mix(in srgb, #6cb8ff 15%, #1a1f2d);
    --accent: #6b6be0; --accent-ink: #ffffff; --accent-text: var(--indigo-x);
    --shadow: none;
    --hero-1: #1c2140; --hero-2: #14302f; --hero-3: #33281a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11141d; --surface: #1a1f2d; --surface-2: #232a3b;
  --ink: #e8ebf4; --ink-2: #a5aec4; --line: #2d364a;
  --indigo: #8f8ff0;  --indigo-x: #a9a9f6;  --indigo-t: color-mix(in srgb, #8f8ff0 16%, #1a1f2d);
  --teal:   #3fd0bd;  --teal-x:   #5fe0cf;  --teal-t:   color-mix(in srgb, #3fd0bd 15%, #1a1f2d);
  --amber:  #ffb54a;  --amber-x:  #ffc674;  --amber-t:  color-mix(in srgb, #ffb54a 15%, #1a1f2d);
  --rose:   #ff7fab;  --rose-x:   #ff9fc0;  --rose-t:   color-mix(in srgb, #ff7fab 15%, #1a1f2d);
  --green:  #5fd28b;  --green-x:  #82e0a6;  --green-t:  color-mix(in srgb, #5fd28b 14%, #1a1f2d);
  --sky:    #6cb8ff;  --sky-x:    #92cbff;  --sky-t:    color-mix(in srgb, #6cb8ff 15%, #1a1f2d);
  --accent: #6b6be0; --accent-ink: #ffffff; --accent-text: var(--indigo-x);
  --shadow: none;
  --hero-1: #1c2140; --hero-2: #14302f; --hero-3: #33281a;
  color-scheme: dark;
}