/* ─────────────────────────────────────────────────────────────────────
 * Onelo — Design Tokens
 * Sijainti: /ai/onelo/app/public/lib/tokens.css
 * Speksi:   /ai/onelo/docs/UI_DESIGN_TOKENS.md
 *
 * Kaikki värit, fontit, välistykset, varjot, radiukset, animaatioiden
 * kestot ja z-indeksit yhdessä paikassa. Moduulien CSS käyttää näitä
 * `var(--token)`-syntaksilla — EI hardcode-arvoja.
 *
 * Tenant-teema (applyTenantTheme app.html:ssä) ylikirjoittaa BRÄNDIVÄRIT
 * inline-tyylillä :root-elementissä. Status-värit, varjot, fontit ym.
 * pysyvät universaalisti samoina (eivät vaihdu tenantin mukaan).
 * ────────────────────────────────────────────────────────────────────� */

:root {
  /* ═══════════════════════════════════════════════════════════════════
   * 1. BRÄNDIVÄRIT  (ylikirjoitetaan tenant-teemalla applyTenantTheme:lla)
   * ═══════════════════════════════════════════════════════════════════ */
  --primary:        #1e3a5f;
  --accent:         #1a6fd4;
  --accent-h:       #1558aa;
  --bg:             #f0f4f8;
  --surface:        #ffffff;
  --text:           #1a2b3c;
  --text-muted:     #6b7f93;
  --border:         #d4dde8;
  --white:          #ffffff;

  /* ═══════════════════════════════════════════════════════════════════
   * 2. STATUS-VÄRIT  (universal — EI ylikirjoiteta tenantilla)
   * ═══════════════════════════════════════════════════════════════════ */
  --status-success: #16a34a;
  --status-warning: #fbbf24;
  --status-danger:  #dc2626;
  --status-info:    #1a6fd4;
  --status-neutral: #94a3b8;

  /* ═══════════════════════════════════════════════════════════════════
   * 3. LIFECYCLE-VÄRIT  (vuorot)
   * ═══════════════════════════════════════════════════════════════════ */
  --shift-planned:    var(--accent);
  --shift-active:     #16a34a;
  --shift-done:       #94a3b8;
  --shift-late:       #dc2626;
  --shift-holiday-bg: #fef3c7;

  /* ═══════════════════════════════════════════════════════════════════
   * 4. TYPOGRAFIA
   * ═══════════════════════════════════════════════════════════════════ */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    20px;
  --text-2xl:   24px;

  /* ═══════════════════════════════════════════════════════════════════
   * 5. VÄLISTYKSET  (4px rytmi)
   * ═══════════════════════════════════════════════════════════════════ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ═══════════════════════════════════════════════════════════════════
   * 6. VARJOT
   * ═══════════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 3px rgba(15,30,50,.10);
  --shadow-md: 0 4px 12px rgba(15,30,50,.15);
  --shadow-lg: 0 10px 30px rgba(15,30,50,.20);

  /* FAB-napin monikerroksinen halo + varjo */
  --shadow-fab:
    0 0 0 6px rgba(26,111,212,.10),
    0 0 0 12px rgba(26,111,212,.05),
    0 4px 18px rgba(26,111,212,.40);

  /* ═══════════════════════════════════════════════════════════════════
   * 7. REUNAT  (radius)
   * ═══════════════════════════════════════════════════════════════════ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-pill: 9999px;
  --radius:      8px;   /* Legacy-alias (= --radius-md). Säilytetään yhteensopivuuden vuoksi. */

  /* ═══════════════════════════════════════════════════════════════════
   * 8. ANIMAATIOT
   * ═══════════════════════════════════════════════════════════════════ */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --ease-out:      cubic-bezier(.34,1.56,.64,1);

  /* ═══════════════════════════════════════════════════════════════════
   * 9. Z-INDEX  (kerrokset, vältetään konflikteja)
   * ═══════════════════════════════════════════════════════════════════ */
  --z-sidebar:   100;
  --z-fab:       900;
  --z-ai-panel: 8001;
  /* OSA 96 (2026-05-26): modal nostettu 9000 → 50000 koska useat moduulit
     (bk-overlay, sm-overlay jne.) käyttävät hard-coded 9000 ja modal.alert
     jäi niiden alle. Toast 60000 pysyy modaaleidenkin päällä. */
  --z-modal:   50000;
  --z-toast:   60000;

  /* ═══════════════════════════════════════════════════════════════════
   * 10. LAYOUT  (legacy-yhteensopivuus)
   * ═══════════════════════════════════════════════════════════════════ */
  --sidebar-w: 230px;
  --topbar-h:  56px;
}