/* ═══════════════════════════════════════════════════════════
   BREATHFLOW v1 — Design Tokens
   Eine Quelle für Farbe, Raum, Radius, Tempo.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Phasen-Farben (identisch in beiden Themes, das ist die Marke) ── */
  --c-inhale:      #5cc7e6;
  /* Zielton am Ende des Einatmens. Gleich der Grundfarbe = kein Vertiefen. */
  --c-inhale-deep: #5cc7e6;
  --c-hold-top:    #b794f6;
  --c-exhale:      #4ade80;
  --c-hold-bottom: #818cf8;
  --c-rest:        #94a3b8;

  /* ── Semantik ── */
  --c-good:   #3fb38a;
  --c-warn:   #e2a03f;
  --c-alert:  #e0756b;
  --c-heart:  #ef6d8a;
  /* Ab 3 Atemzügen pro Minute und darunter — der tiefe Bereich. */
  --c-deep:   #1c9fce;

  /* ── Raster & Radius ── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 42px;

  /* ── Typo ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --fs-xs:  0.72rem;
  --fs-sm:  0.82rem;
  --fs-md:  0.94rem;
  --fs-lg:  1.1rem;
  --fs-xl:  1.45rem;
  --fs-2xl: 2rem;

  /* ── Tempo ── */
  --t-fast: 140ms;
  --t-mid:  280ms;
  --t-slow: 480ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Layout ── */
  --topbar-h: 58px;
  --nav-h: 62px;
  --rail-w: 92px;
  --max-w: 1440px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Als installierte App kommt der Home-Indikator dazu (~34 px). Die volle
     Zone oben drauf lässt die Leiste klobig werden — 18 px reichen, damit
     nichts unter dem Indikator klebt. */
  --nav-pad-b: var(--safe-b);
}

/* ══════════════ LIGHT (Default) ══════════════ */
:root, :root.light {
  --bg-0:      #ffffff;
  --bg-1:      #fbfcfe;
  /* Sehr helle Tönungen auf Weiß — sie sollen den Raum färben, nicht abdunkeln */
  --aurora-1:  214, 234, 250;
  --aurora-2:  228, 240, 252;
  --aurora-3:  219, 243, 244;
  --aurora-4:  234, 231, 250;
  --aurora-base: #ffffff;
  --aurora-op:  0.72;

  --t:         #12202e;
  --t-soft:    rgba(18, 32, 46, 0.66);
  --t-faint:   rgba(18, 32, 46, 0.42);

  --glass:     rgba(255, 255, 255, 0.78);
  --glass-2:   rgba(255, 255, 255, 0.58);
  --glass-bd:  rgba(18, 46, 76, 0.09);
  --glass-hi:  rgba(255, 255, 255, 0.85);
  --surface:   rgba(252, 253, 255, 0.94);

  --accent:    #2f78ab;
  --accent-2:  #4ca7c3;
  --accent-ct: #ffffff;

  /* Voll eingeatmet zieht das Blau ins tiefere Breathflow-Blau — auf dem
     hellen Hintergrund bekommt der Orb dadurch am Scheitelpunkt Gewicht. */
  --c-inhale-deep: #3888b7;

  --track:     rgba(18, 46, 76, 0.12);
  --shadow-s:  0 2px 10px rgba(19, 48, 78, 0.06);
  --shadow-m:  0 10px 30px rgba(19, 48, 78, 0.09);
  --shadow-l:  0 24px 60px rgba(19, 48, 78, 0.14);

  /* Auf Weiß wirkt das volle Grün grell. Hier ein Mint mit einem Tick mehr
     Leuchtkraft — dunkel bleibt beim Original, dort trägt die Sättigung. */
  --c-exhale:  #66cfa0;
  --c-deep:    #1c9fce;

  --orb-text:  rgba(255, 255, 255, 0.94);
  /* Der 3-2-1-Countdown steht auf dem Hintergrund, nicht auf dem Orb */
  --countdown-c: #12202e;
  color-scheme: light;
}

/* ══════════════ DARK ══════════════ */
:root.dark {
  --bg-0:      #05070f;
  --bg-1:      #0a0f1c;
  --aurora-1:  16, 48, 92;
  --aurora-2:  28, 128, 196;
  --aurora-3:  24, 200, 210;
  --aurora-4:  55, 32, 110;
  --aurora-base: #04060f;
  --aurora-op:  0.34;

  --t:         #eaf2fb;
  --t-soft:    rgba(234, 242, 251, 0.68);
  --t-faint:   rgba(234, 242, 251, 0.40);

  --glass:     rgba(255, 255, 255, 0.055);
  --glass-2:   rgba(255, 255, 255, 0.03);
  --glass-bd:  rgba(255, 255, 255, 0.10);
  --glass-hi:  rgba(255, 255, 255, 0.14);
  --surface:   rgba(16, 23, 38, 0.94);

  --accent:    #5cc7e6;
  --accent-2:  #8ad9ef;
  --accent-ct: #05121c;

  /* Im Dunkeln bleibt das Blau wie es ist — ein Vertiefen würde dort
     absaufen. Gleicher Wert wie --c-inhale heißt: kein Übergang. */
  --c-inhale-deep: #5cc7e6;

  --track:     rgba(255, 255, 255, 0.12);
  --shadow-s:  0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-m:  0 12px 34px rgba(0, 0, 0, 0.45);
  --shadow-l:  0 28px 70px rgba(0, 0, 0, 0.6);

  --c-exhale:  #4ade80;
  --c-deep:    #6fd8f5;

  --orb-text:  rgba(6, 18, 30, 0.85);
  --countdown-c: #ffffff;
  color-scheme: dark;
}

/* Theme-abhängige Bild-Varianten — Hell ist der Ausgangszustand */
.only-light { display: block; }
.only-dark  { display: none; }
:root.dark .only-light { display: none; }
:root.dark .only-dark  { display: block; }