/* ==========================================================================
   Unisono Design Tokens v0.4
   Quelle: Designsystem-Doc "Unisono" + Canvas "Farbpaletten, Logo & Screens"
   Hell ist Standard. Dunkel über System-Einstellung oder data-theme="dark".

   Änderungen gegenüber der gelieferten v0.4 (für die App):
   - Schriften lokal aus fonts/ statt @import von Google Fonts (läuft offline und über file://).
   - :root[data-theme="dark"] enthält jetzt auch Sprecher, Wellenform und Markierungen
     (fehlten dort, im Media-Query-Block standen sie doppelt).
   - Abschnitt "App-Ergänzungen" am Ende von :root: Mistral auf den freien Akzent,
     Größen, die DESIGN.md als Zahl nennt, und drei zusätzliche Schriftstufen.
   ========================================================================== */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/manrope-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* ---- Flächen ---- */
  --surface-canvas: #F4F1EC;   /* Papier: Seitenhintergrund */
  --surface-raised: #FFFFFF;   /* Karten, Panels */
  --surface-sunken: #ECE7E0;   /* Stein: Inputs, Upload-Zone */

  /* ---- Text ---- */
  --text-primary: #1F1C1A;     /* 15,0:1 auf Papier */
  --text-secondary: #5E5852;   /*  6,2:1 */
  --text-tertiary: #6F6962;    /*  4,8:1 – Metadaten, Zeitstempel */

  /* ---- Linien ---- */
  --border-subtle: rgba(31, 28, 26, .08);
  --border-strong: rgba(31, 28, 26, .16);

  /* ---- Aktionen (immer neutral, nie farbig) ---- */
  --action-primary: #1F1C1A;
  --action-on-primary: #F4F1EC;
  --focus-ring: #1F1C1A;

  /* ---- Anbieter-Akzente: Basis (Punkte, Grafik) ---- */
  --provider-gladia: #7664C0;      /* Violett (Markenakzent) */
  --provider-assemblyai: #6170B2;  /* Kobaltblau (Logo) */
  --provider-elevenlabs: #F7F4EE;  /* Weiß (Markenfarbe), im Hellmodus mit Rand */
  --provider-free: #C07A7A;        /* Rosenholz: nächster Anbieter */

  /* ---- Anbieter-Akzente: Stark (Linien, Text im Hellmodus, >= 4,5:1) ---- */
  --provider-gladia-strong: #48388A;
  --provider-assemblyai-strong: #404C82;
  --provider-elevenlabs-strong: #6E675D;
  --provider-free-strong: #985454;

  /* ---- Anbieter-Tints: nur für Anbieter-Flächen, NIE für Sprecher ---- */
  --provider-gladia-tint: rgba(118, 100, 192, .15);
  --provider-assemblyai-tint: rgba(97, 112, 178, .15);
  --provider-elevenlabs-tint: rgba(110, 103, 93, .12);
  --provider-free-tint: rgba(192, 122, 122, .15);

  /* ---- Status ---- */
  --status-success: #357A5B;
  --status-warning: #C58A2B;
  --status-danger: #C2503F;
  --status-info: #4F72A8;

  /* ---- Sprecher: neutral, nie Anbieterfarben ---- */
  --speaker-1: #1F1C1A;
  --speaker-2: #6F6962;
  --speaker-3: #A59E96;
  --speaker-4: #CFC8BF;           /* ab 4 Sprechern tragen die Kürzel die Unterscheidung */
  --speaker-on-1: #F4F1EC;        /* Kürzel-Text auf der Sprecherfarbe */
  --speaker-on-2: #F4F1EC;
  --speaker-on-3: #1F1C1A;
  --speaker-on-4: #1F1C1A;
  --speaker-label-bg: #ECE7E0;    /* Hinterlegung des Sprecherlabels */
  --speaker-lane: #ECE7E0;        /* Hintergrund der Sprecherspur */

  /* ---- Wellenform: einfarbig ---- */
  --wave-played: #1F1C1A;
  --wave-rest: rgba(31, 28, 26, .22);

  /* ---- Markierungen im Transkript ---- */
  --mark-diff-bg: rgba(214, 154, 78, .22);     /* Abweichung zwischen Engines */
  --mark-diff-line: #D69A4E;
  --mark-uncertain: #C58A2B;                   /* gepunktete Unterstreichung */
  --mark-playing-bg: rgba(31, 28, 26, .08);    /* aktuell gespieltes Wort */

  /* ---- Schriften ---- */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Typo-Skala: Größe / Zeilenhöhe / Gewicht / Laufweite ---- */
  --type-display-xl: 300 72px/76px var(--font-display);
  --type-display-l:  300 56px/60px var(--font-display);
  --type-display-m:  300 40px/46px var(--font-display);
  --type-heading:    400 28px/34px var(--font-display);
  --type-title:      500 20px/28px var(--font-body);
  --type-body-l:     400 18px/28px var(--font-body);
  --type-body:       400 15px/24px var(--font-body);
  --type-small:      400 13px/20px var(--font-body);
  --type-label:      700 12px/16px var(--font-display);
  --type-mono:       400 13px/20px var(--font-mono);
  --tracking-display: -0.02em;
  --tracking-display-m: -0.015em;
  --tracking-heading: -0.01em;
  --tracking-body: 0.01em;
  --tracking-label: 0.08em;

  /* ---- Abstände (4-px-Raster) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --measure: 68ch;
  --sidebar-width: 240px;

  /* ---- Radien ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Tiefe ---- */
  --elev-1: inset 0 0 0 .5px rgba(31, 28, 26, .08), 0 1px 2px rgba(31, 28, 26, .04);
  --elev-2: 0 0 0 1px rgba(31, 28, 26, .06), 0 4px 8px -2px rgba(31, 28, 26, .05), 0 12px 24px -8px rgba(31, 28, 26, .06);
  --elev-3: 0 0 0 1px rgba(31, 28, 26, .06), 0 24px 48px -12px rgba(31, 28, 26, .12);

  /* ---- Bewegung ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-ambient: 6000ms;

  /* ---- Größen ---- */
  --control-height: 40px;
  --input-height: 44px;
  --touch-min: 44px;

  /* ==== App-Ergänzungen ==== */

  /* Mistral ist der "nächste Anbieter" aus DESIGN.md und bekommt den freien Akzent (Rosenholz). */
  /* Mistral: Orange, wie die Marke. */
  --provider-mistral: #BC7559;
  --provider-mistral-strong: #8A4F38;
  --provider-mistral-tint: rgba(188, 117, 89, .15);

  /* Stufen, die DESIGN.md als Zahl nennt */
  --type-button: 500 15px/20px var(--font-body);   /* Sekundärbutton: Inter 15/500 */
  --type-name:   500 12px/16px var(--font-body);   /* Sprechername im Label: Inter 12/500 */
  --type-badge:  400 10px/12px var(--font-mono);   /* Sprecherkürzel: Mono 10 px */

  /* Maße, die DESIGN.md als Zahl nennt */
  --chip-height: 36px;             /* Engine-Chip */
  --speaker-lane-height: 14px;     /* Sprecherspur unter der Wellenform */
  --speaker-bar-height: 8px;       /* Redeabschnitt in der Spur */
  --speaker-badge-size: 20px;      /* Kürzel-Quadrat im Sprecherlabel */
  --logo-stroke: 3.5;              /* Bildmarke: Strich auf 48er-Raster */
  --logo-stroke-small: 5;          /* ab 32 px und kleiner: dickerer Strich */

  /* Weitere App-Maße */
  --wave-height: 56px;
  --play-size: 48px;
  --icon-size: 20px;
  --icon-size-s: 16px;
  --line-thin: 2px;                /* Fortschrittslinie, Unterlinie gespieltes Wort */
  --topbar-height: 56px;
  --tabbar-height: 64px;

  /* Aufnahme vor Ort: abgedunkelter Bildschirm (in Hell und Dunkel gleich, fast schwarz spart Akku) */
  --surface-dim: #0C0B0A;
  --text-on-dim: #857E77;
  --mark-button-height: 96px;      /* großer Merker-Button, mit dem Daumen blind treffbar */
}

/* ---------------- Dunkelmodus ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-canvas: #121110;
    --surface-raised: #1B1A18;
    --surface-sunken: #0C0B0A;
    --text-primary: #F2EEE8;
    --text-secondary: #A9A29A;
    --text-tertiary: #857E77;
    --border-subtle: rgba(242, 238, 232, .08);
    --border-strong: rgba(242, 238, 232, .16);
    --action-primary: #F2EEE8;
    --action-on-primary: #121110;
    --focus-ring: #F2EEE8;
    /* Im Dunkeln reichen die Basistöne für Linien und Text */
    --provider-gladia-strong: #ACA0D9;
    --provider-assemblyai-strong: #A6AED4;
    --provider-elevenlabs-strong: #E8E3D8;
    --provider-mistral-strong: #D9B1A0;
    --provider-free-strong: #D39A9A;
    --provider-gladia-tint: rgba(118, 100, 192, .15);
    --provider-assemblyai-tint: rgba(97, 112, 178, .15);
    --mark-playing-bg: rgba(242, 238, 232, .10);
    --speaker-1: #F2EEE8;
    --speaker-2: #A9A29A;
    --speaker-3: #6B655F;
    --speaker-4: #45413D;
    --speaker-on-1: #121110;
    --speaker-on-2: #121110;
    --speaker-on-3: #F2EEE8;
    --speaker-on-4: #F2EEE8;
    --speaker-label-bg: #0C0B0A;
    --speaker-lane: #0C0B0A;
    --wave-played: #F2EEE8;
    --wave-rest: rgba(242, 238, 232, .28);
    --mark-uncertain: #E0AE6C;
    --mark-diff-line: #D69A4E;
    --elev-1: inset 0 0 0 .5px rgba(242, 238, 232, .08);
    --elev-2: 0 0 0 1px rgba(242, 238, 232, .08);
    --elev-3: 0 0 0 1px rgba(242, 238, 232, .10), 0 24px 48px -12px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #121110;
  --surface-raised: #1B1A18;
  --surface-sunken: #0C0B0A;
  --text-primary: #F2EEE8;
  --text-secondary: #A9A29A;
  --text-tertiary: #857E77;
  --border-subtle: rgba(242, 238, 232, .08);
  --border-strong: rgba(242, 238, 232, .16);
  --action-primary: #F2EEE8;
  --action-on-primary: #121110;
  --focus-ring: #F2EEE8;
  --provider-gladia-strong: #ACA0D9;
  --provider-assemblyai-strong: #A6AED4;
  --provider-elevenlabs-strong: #E8E3D8;
  --provider-mistral-strong: #D9B1A0;
  --provider-free-strong: #D39A9A;
  --provider-gladia-tint: rgba(118, 100, 192, .15);
  --provider-assemblyai-tint: rgba(97, 112, 178, .15);
  --mark-playing-bg: rgba(242, 238, 232, .10);
  --speaker-1: #F2EEE8;
  --speaker-2: #A9A29A;
  --speaker-3: #6B655F;
  --speaker-4: #45413D;
  --speaker-on-1: #121110;
  --speaker-on-2: #121110;
  --speaker-on-3: #F2EEE8;
  --speaker-on-4: #F2EEE8;
  --speaker-label-bg: #0C0B0A;
  --speaker-lane: #0C0B0A;
  --wave-played: #F2EEE8;
  --wave-rest: rgba(242, 238, 232, .28);
  --mark-uncertain: #E0AE6C;
  --mark-diff-line: #D69A4E;
  --elev-1: inset 0 0 0 .5px rgba(242, 238, 232, .08);
  --elev-2: 0 0 0 1px rgba(242, 238, 232, .08);
  --elev-3: 0 0 0 1px rgba(242, 238, 232, .10), 0 24px 48px -12px rgba(0, 0, 0, .5);
}

/* ---------------- Basis ---------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ---------------- Wortmarke ---------------- */
/* Markup: <span class="wordmark" aria-label="Unisono">unısono</span>  (ı = U+0131) */
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}

/* ---------------- Typo-Hilfsklassen ---------------- */
.t-display-xl { font: var(--type-display-xl); letter-spacing: var(--tracking-display); }
.t-display-l  { font: var(--type-display-l);  letter-spacing: var(--tracking-display); }
.t-display-m  { font: var(--type-display-m);  letter-spacing: var(--tracking-display-m); }
.t-heading    { font: var(--type-heading);    letter-spacing: var(--tracking-heading); }
.t-title      { font: var(--type-title); }
.t-body-l     { font: var(--type-body-l); letter-spacing: var(--tracking-body); }
.t-body       { font: var(--type-body);   letter-spacing: var(--tracking-body); }
.t-small      { font: var(--type-small);  letter-spacing: var(--tracking-body); }
.t-label      { font: var(--type-label);  letter-spacing: var(--tracking-label); text-transform: uppercase; }
.t-mono       { font: var(--type-mono); font-variant-numeric: tabular-nums; }