/**
 * JakToMám — Design Tokens (CSS Custom Properties)
 *
 * Použití: var(--color-accent)
 * Toto je jediný zdroj pravdy pro barvy, mezery a stíny celého projektu.
 * Inline styly a hardcoded hodnoty pište ZDE — nikde jinde.
 */

:root {

  /* ── Navigace ──────────────────────────────────────────────────────────── */
  --color-nav:        #1a1a2e;
  --color-nav-text:   rgba(255,255,255,.75);
  --color-nav-hover:  #fff;

  /* ── Pozadí stránek ────────────────────────────────────────────────────── */
  --color-bg:         #f4f4f4;   /* světlé stránky (dashboard, admin…) */
  --color-bg-dark:    #060612;   /* Three.js scény (gem, 3D, scatter) */
  --color-bg-scene:   #0d0d1a;   /* alternativní tmavé pozadí scén */
  --color-surface:    #ffffff;   /* karty, formuláře */
  --color-surface-2:  #f8f8fc;   /* hover stav karet */
  --color-surface-3:  #f0f0f8;   /* subtile hover (nav, dropdown) */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --color-text:       #222222;
  --color-text-2:     #374151;   /* sekundární text */
  --color-text-3:     #6b7280;   /* nápověda, popisky */
  --color-text-4:     #9ca3af;   /* velmi tlumený */
  --color-text-dark:  rgba(255,255,255,.88);   /* text na tmavém pozadí */
  --color-text-dark-2: rgba(255,255,255,.55);  /* sekundární na tmavém */

  /* ── Primární akcent (modrá) ────────────────────────────────────────────── */
  --color-accent:       #4a90d9;
  --color-accent-dark:  #88b4ff;   /* akcent na tmavém pozadí */
  --color-accent-hover: #3578c0;
  --color-accent-light: rgba(74,144,217,.12);  /* jemný background akcent */

  /* ── Sémantické barvy ──────────────────────────────────────────────────── */
  --color-positive:   #86efac;   /* zelená — pozitivní pojmy */
  --color-negative:   #fca5a5;   /* červená — negativní pojmy */
  --color-self:       #fde68a;   /* žlutá — Já / self */
  --color-neutral:    #93c5fd;   /* světle modrá — neutrální */

  --color-success:    #16a34a;   /* úspěch (text/border) */
  --color-success-bg: #d1fae5;   /* úspěch (pozadí) */
  --color-error:      #b91c1c;   /* chyba (text) */
  --color-error-bg:   #fde8e8;   /* chyba (pozadí) */
  --color-warning:    #d97706;   /* varování (text) */
  --color-warning-bg: #fff3cd;   /* varování (pozadí) */
  --color-info:       #046;      /* informace (text) */
  --color-info-bg:    #e8f4fd;   /* informace (pozadí) */

  /* ── Psychometrický prostor ─────────────────────────────────────────────── */
  --color-affinity:   #6366f1;   /* afinita / koheze */
  --color-group:      #06b6d4;   /* grupa / kolektivní */
  --color-conflict:   #f97316;   /* konflikt / tenze */
  --color-shadow:     #7c3aed;   /* stín / potlačené */

  /* ── Okraje a dělítka ──────────────────────────────────────────────────── */
  --color-border:       #e5e7eb;
  --color-border-2:     #d1d5db;
  --color-border-dark:  rgba(255,255,255,.18);   /* okraj na tmavém pozadí */
  --color-border-focus: #4a90d9;

  /* ── Zaoblení ───────────────────────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-xl:    12px;
  --radius-full:  9999px;

  /* ── Stíny ──────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 2px 8px rgba(0,0,0,.10);
  --shadow-lg:    0 4px 24px rgba(0,0,0,.15);
  --shadow-card:  0 2px 8px rgba(0,0,0,.10);
  --shadow-dark:  0 4px 24px rgba(0,0,0,.35);   /* stíny na tmavém pozadí */

  /* ── Typografie ─────────────────────────────────────────────────────────── */
  --font-base:    system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', monospace;
  --font-size-xs: .72rem;
  --font-size-sm: .82rem;
  --font-size-md: .92rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.4rem;

  /* ── Mezery (8px grid) ──────────────────────────────────────────────────── */
  --space-1:  .25rem;   /*  4px */
  --space-2:  .5rem;    /*  8px */
  --space-3:  .75rem;   /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ── Breakpointy (reference v komentářích, CSS media queries je musí opsat) */
  /* sm: 480px | md: 680px | lg: 900px | xl: 1100px                          */

  /* ── Animace ────────────────────────────────────────────────────────────── */
  --transition-fast:  .1s ease;
  --transition-base:  .15s ease;
  --transition-slow:  .25s ease;
}