/* ============================================================================
   SecondBrain — Design-Tokens
   Haltung: Graphit-Hülle, die Fotos tragen die Farbe, Bernstein nur für
   Handlungen und aktive Zustände. Alle Farben in OKLCH.
   Kontraste gegen --bg (13,4:1 / 7,8:1 / 4,9:1) sind geprüft, nicht geschätzt.
   ========================================================================= */

:root {
  /* ---- Flächen ---------------------------------------------------------- */
  --bg:            oklch(0.17 0.008 260);  /* tiefes Graphit, minimal kühl    */
  --surface:       oklch(0.21 0.010 260);  /* Karten, Sheets, Leisten        */
  --surface-2:     oklch(0.25 0.012 260);  /* erhöht: Chips, Inputs          */
  --surface-3:     oklch(0.30 0.013 260);  /* Hover auf erhöhten Flächen     */
  --line:          oklch(0.30 0.012 260);
  --line-soft:     oklch(0.25 0.010 260);

  /* ---- Text ------------------------------------------------------------- */
  --ink:           oklch(0.96 0.004 260);  /* 13,4:1 — Fließtext, Titel      */
  --ink-2:         oklch(0.78 0.008 260);  /*  7,8:1 — Sekundärtext          */
  --muted:         oklch(0.65 0.010 260);  /*  4,9:1 — Meta, nie tragend     */

  /* ---- Akzent ----------------------------------------------------------- */
  --accent:        oklch(0.72 0.150 62);   /* Bernstein                      */
  --accent-hi:     oklch(0.80 0.140 62);   /* Hover                          */
  --accent-ink:    oklch(0.20 0.030 62);   /* Text auf Akzentfläche, 5,3:1   */
  --accent-dim:    oklch(0.32 0.060 62);   /* getönte Fläche, Rahmen         */
  --accent-glow:   oklch(0.72 0.150 62 / 0.22);

  /* ---- Semantik --------------------------------------------------------- */
  --danger:        oklch(0.68 0.170 25);
  --danger-dim:    oklch(0.30 0.070 25);
  --ok:            oklch(0.74 0.130 155);
  --warn:          oklch(0.78 0.140 85);
  --info:          oklch(0.72 0.110 240);

  /* Prioritäten (Todoist p1..p4) — immer zusätzlich mit Textlabel */
  --p1: oklch(0.68 0.170 25);
  --p2: oklch(0.76 0.150 60);
  --p3: oklch(0.72 0.110 240);
  --p4: oklch(0.55 0.010 260);

  /* ---- Abstände --------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* ---- Radien ----------------------------------------------------------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---- Typografie ------------------------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-micro: 0.6875rem;  /* 11 */
  --t-label: 0.75rem;    /* 12 */
  --t-sm:    0.8125rem;  /* 13 */
  --t-body:  0.9375rem;  /* 15 */
  --t-lead:  1.0625rem;  /* 17 */
  --t-h2:    1.3125rem;  /* 21 */
  --t-h1:    1.6875rem;  /* 27 */
  --t-disp:  2.125rem;   /* 34 */

  /* ---- Schatten & Höhe -------------------------------------------------- */
  --sh-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --sh-2: 0 4px 16px oklch(0 0 0 / 0.45);
  --sh-3: 0 12px 40px oklch(0 0 0 / 0.55);

  /* ---- z-Index (semantisch, keine 9999er) ------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 200;
  --z-sheet-backdrop: 290;
  --z-sheet: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---- Bewegung --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quint        */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --d-fast: 130ms;
  --d-base: 200ms;
  --d-slow: 320ms;

  /* ---- Safe Areas (PWA randlos auf dem iPhone) -------------------------- */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* Höhe der Tab-Leiste inkl. Safe Area — Views polstern damit ihren Fuß */
  --nav-h: calc(56px + var(--sab));

  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --nav-h: 0px; --rail-w: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; }
}