/* Nunito (SIL Open Font License, fonts/OFL.txt) – rund und freundlich, variable Strichstärke */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* Zeitreich – Design-Tokens
   Alle Komponenten verwenden ausschließlich diese Variablen. */

:root {
  /* Typografie (System-Schriften, nichts zu laden) */
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.875rem;    /* 14 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.5rem;      /* 24 */
  --text-2xl: 2rem;       /* 32 */
  --text-hero: clamp(2.5rem, 9vw, 3.75rem);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 750;
  --weight-heavy: 850;

  --leading-tight: 1.15;
  --leading-normal: 1.5;

  /* Abstände (4er-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Rahmen & Radien */
  --border-width: 1px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout */
  --content-width: 40rem;
  --content-width-wide: 66rem; /* Desktop: Eingaben | Ergebnis nebeneinander */
  --tap-size: 2.75rem;    /* 44px Touch-Ziel */

  /* Bewegung */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --duration: 160ms;

  /* Farben: light-dark(hell, dunkel). Welches gilt, bestimmt color-scheme –
     automatisch nach System oder fest per <html data-theme="light|dark"> (Einstellungen). */
  color-scheme: light dark;

  /* Palette „Meer & Sonne“: Petrolblau als Hauptfarbe, Gold als Sonnen-Akzent */
  --color-bg: light-dark(#f4f8fa, #0f171b);
  --color-surface: light-dark(#ffffff, #162228);
  --color-surface-sunken: light-dark(#e9f0f4, #0b1215);
  --color-border: light-dark(#d3e1e8, #26363e);
  --color-border-strong: light-dark(#a7bcc6, #3e525b);

  --color-text: light-dark(#14232b, #e8f1f5);
  --color-text-secondary: light-dark(#45585f, #b1c4cc);
  --color-text-muted: light-dark(#5f727a, #8b9fa7);

  --color-accent: light-dark(#0f6a8f, #5cc3eb);          /* Petrolblau: Vertrauen, Weite */
  --color-accent-hover: light-dark(#0b5675, #84d3f1);
  --color-accent-soft: light-dark(#dceff7, #173847);
  --color-on-accent: light-dark(#ffffff, #0f171b);

  --color-chart-line: light-dark(#0f6a8f, #5cc3eb);
  --color-chart-fill: light-dark(rgba(15, 106, 143, 0.12), rgba(92, 195, 235, 0.14));
  --color-chart-grid: light-dark(#e1eaef, #1f2d34);

  /* Sonnenaufgang (aus dem Logo): goldener Zweitakzent für „frei“-Momente und Ereignisse */
  --color-sun: light-dark(#9a4f00, #ffbe55);              /* textsicher (Kontrast ≥ 4,5:1) */
  --color-sun-glow: light-dark(#f2a516, #ffc35e);          /* nur dekorativ */
  --color-sun-soft: light-dark(#fff2d9, #3a2b12);

  --color-chart-marker: var(--color-sun);                  /* Ereignisse: Aufhören, Rente, Frei mit */

  --color-warning-bg: light-dark(#fff2d9, #3a2b12);
  --color-warning-text: light-dark(#6b4500, #ffd894);

  --color-focus: light-dark(#1d74c9, #74b8f2);

  /* Schatten */
  --shadow-sm: 0 1px 2px light-dark(rgba(20, 35, 43, 0.06), rgba(0, 0, 0, 0.3));
  --shadow-md: 0 2px 4px light-dark(rgba(20, 35, 43, 0.05), rgba(0, 0, 0, 0.25)),
               0 8px 24px light-dark(rgba(20, 35, 43, 0.07), rgba(0, 0, 0, 0.3));
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }