/* ======================================================================
   TimeControl — Design Tokens
   Farbwelt, Typografie, Abstände, Radien, Schatten.
   Diese Datei definiert das Fundament; app.css und site.css bauen darauf auf.
   ====================================================================== */

/* ----------------------------------------------------------------------
   Schriften
   Die @font-face-Regeln stehen in fonts.css und werden von head.php nur
   dann eingebunden, wenn die Schriftdateien tatsächlich vorhanden sind.
   Fehlen sie, greift der System-Fallback unten – ohne Fehlermeldungen
   in der Browser-Konsole.
   Ablage: /assets/fonts/  — siehe assets/fonts/README.md
   ---------------------------------------------------------------------- */

:root {
  /* --- Schriftfamilien --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
               Menlo, Consolas, 'Liberation Mono', monospace;

  /* --- Flächen & Schrift (hell) ---
     Warmes Off-White statt kaltem Grau: wirkt hochwertiger und ruhiger. */
  --bg:        #F7F6F2;
  --bg-elev:   #FFFFFF;
  --bg-sunken: #EFEDE7;

  --ink:   #0E0F12;
  --ink-2: #2A2C32;
  --ink-3: #5B5E68;
  --ink-4: #686B75;   /* abgedunkelt: erfüllt 4.5:1 auch auf --bg-sunken */

  /* Trennlinien sind rein dekorativ und dürfen fein bleiben.
     Für Ränder von Bedienelementen gibt es --field-border. */
  --line:   #E4E2DB;
  --line-2: #D6D3CB;

  /* Rand von Eingabefeldern: mindestens 3:1 gegen die Fläche
     (WCAG 1.4.11, Kontrast von Bedienelementen) */
  --field-border: #8E887E;

  /* --- Akzent --- */
  --accent:      #2A3FE5;
  --accent-ink:  #1A2BB8;
  --accent-soft: #E8EAFE;
  --accent-fg:   #FFFFFF;

  /* --- Statusfarben ---
     Jeweils zwei Töne: der kräftige für Flächen und Symbole,
     der "-ink"-Ton für Text auf der zugehörigen weichen Fläche.
     Beides getrennt, weil ein Ton nicht gleichzeitig als Fläche
     wirken und auf heller Fläche lesbar sein kann. */
  --good:      #167F4E;
  --good-ink:  #15794A;
  --good-soft: #DCEFE3;

  --warn:      #AB6600;
  --warn-ink:  #9E5E00;
  --warn-soft: #FBEFD8;

  --bad:       #C8321E;
  --bad-ink:   #C0301D;
  --bad-soft:  #F9E1DC;

  /* --- Kategoriefarben (für Kategorien/Auswertungen) --- */
  --cat-1: #2A3FE5;
  --cat-2: #167F4E;
  --cat-3: #B26A00;
  --cat-4: #C8321E;
  --cat-5: #7C3AED;
  --cat-6: #0E7490;
  --cat-7: #BE185D;
  --cat-8: #5B5E68;

  /* --- Radien --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  /* --- Schatten --- */
  --shadow-sm: 0 1px 0 rgba(14,15,18,.04), 0 1px 2px rgba(14,15,18,.04);
  --shadow-md: 0 1px 0 rgba(14,15,18,.04), 0 8px 24px -8px rgba(14,15,18,.10);
  --shadow-lg: 0 1px 0 rgba(14,15,18,.04), 0 24px 60px -20px rgba(14,15,18,.18);

  /* --- Abstände --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* --- Übergänge --- */
  --t-fast: .12s ease;
  --t-med:  .2s ease;

  /* --- Höhen von Bedienelementen ---
     Verbindlich für Schaltflächen, Eingabefelder und Auswahllisten.
     Nur diese drei Größen verwenden, damit alles, was nebeneinander
     steht, auch auf einer Linie sitzt. */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;

  /* Einheitliche Innenabstände von Flächen */
  --pad-card:  22px;
  --pad-tight: 16px;

  /* --- Layout --- */
  --sidebar-w: 240px;
  --topbar-h:  64px;
}

/* ----------------------------------------------------------------------
   Dunkles Theme
   ---------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0B0C10;
  --bg-elev:   #14161C;
  --bg-sunken: #0E1015;

  --ink:   #F2F2F0;
  --ink-2: #DDDDDA;
  --ink-3: #9AA0AB;
  --ink-4: #7A808B;   /* aufgehellt: erfüllt 4.5:1 auch auf --bg-sunken */

  --line:   #23262F;
  --line-2: #2D3140;

  --field-border: #5C6373;

  --accent:      #7C8BFF;
  --accent-ink:  #A3AEFF;
  --accent-soft: #1B1F3F;
  --accent-fg:   #0B0C10;

  /* Im dunklen Theme sind die kräftigen Töne bereits hell genug,
     um auf den weichen Flächen zu bestehen – "-ink" entspricht ihnen. */
  --good:      #4DC788;
  --good-ink:  #4DC788;
  --good-soft: #173425;

  --warn:      #E5A24A;
  --warn-ink:  #E5A24A;
  --warn-soft: #3A2A12;

  --bad:       #FF7B66;
  --bad-ink:   #FF7B66;
  --bad-soft:  #3A1A14;

  --cat-1: #7C8BFF;
  --cat-2: #4DC788;
  --cat-3: #E5A24A;
  --cat-4: #FF7B66;
  --cat-5: #A78BFA;
  --cat-6: #22D3EE;
  --cat-7: #F472B6;
  --cat-8: #9AA0AB;

  --shadow-sm: 0 1px 0 rgba(0,0,0,.4);
  --shadow-md: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 1px 0 rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.7);
}

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

/* ----------------------------------------------------------------------
   Systemeinstellung, solange nichts festgelegt ist.

   Greift nur, wenn kein data-theme gesetzt ist. Im Normalfall setzt das
   Skript im <head> das Attribut bereits vor dem ersten Zeichnen; dieser
   Block ist die Absicherung für den Fall, dass JavaScript nicht läuft.
   Die Werte müssen mit [data-theme="dark"] übereinstimmen.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg:        #0B0C10;
    --bg-elev:   #14161C;
    --bg-sunken: #0E1015;

    --ink:   #F2F2F0;
    --ink-2: #DDDDDA;
    --ink-3: #9AA0AB;
    --ink-4: #7A808B;

    --line:   #23262F;
    --line-2: #2D3140;

    --field-border: #5C6373;

    --accent:      #7C8BFF;
    --accent-ink:  #A3AEFF;
    --accent-soft: #1B1F3F;
    --accent-fg:   #0B0C10;

    --good:      #4DC788;
    --good-ink:  #4DC788;
    --good-soft: #173425;

    --warn:      #E5A24A;
    --warn-ink:  #E5A24A;
    --warn-soft: #3A2A12;

    --bad:       #FF7B66;
    --bad-ink:   #FF7B66;
    --bad-soft:  #3A1A14;

    --cat-1: #7C8BFF;
    --cat-2: #4DC788;
    --cat-3: #E5A24A;
    --cat-4: #FF7B66;
    --cat-5: #A78BFA;
    --cat-6: #22D3EE;
    --cat-7: #F472B6;
    --cat-8: #9AA0AB;

    --shadow-sm: 0 1px 0 rgba(0,0,0,.4);
    --shadow-md: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
    --shadow-lg: 0 1px 0 rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.7);
  }
}

/* ======================================================================
   Reset & Grundlagen
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

p { color: var(--ink-2); }

/* Tastaturfokus bleibt immer sichtbar — wichtig für Bedienbarkeit */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ======================================================================
   Hilfsklassen
   ====================================================================== */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.strong { color: var(--ink); font-weight: 560; }

.row  { display: flex; gap: var(--sp-3); align-items: center; }
.col  { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--line); width: 100%; }

.hidden { display: none !important; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ======================================================================
   Bewegung reduzieren
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}