/* ============================================================
   TITAN DESIGN TOKENS
   Jediný zdroj pravdy pro celý design systém.
   Accent barva je konfigurovatelná přes localStorage (H + S).
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       ACCENT — uživatelsky konfigurovatelná barva
       Výchozí: indigo (~#6366f1), přepsáno z localStorage
    ---------------------------------------------------------- */
    --accent-h: 239;
    --accent-s: 70%;

    --accent-50:  hsl(var(--accent-h), var(--accent-s), 96%);
    --accent-100: hsl(var(--accent-h), var(--accent-s), 91%);
    --accent-200: hsl(var(--accent-h), var(--accent-s), 82%);
    --accent-300: hsl(var(--accent-h), var(--accent-s), 70%);
    --accent-400: hsl(var(--accent-h), var(--accent-s), 60%);
    --accent-500: hsl(var(--accent-h), var(--accent-s), 50%);
    --accent-600: hsl(var(--accent-h), var(--accent-s), 42%);
    --accent-700: hsl(var(--accent-h), var(--accent-s), 34%);
    --accent-900: hsl(var(--accent-h), var(--accent-s), 20%);

    /* ----------------------------------------------------------
       NEUTRAL SCALE — neměnná šedivá paleta
    ---------------------------------------------------------- */
    --neutral-0:   #ffffff;
    --neutral-50:  #f8f9fa;
    --neutral-100: #f1f3f5;
    --neutral-200: #e9ecef;
    --neutral-300: #dee2e6;
    --neutral-400: #ced4da;
    --neutral-500: #adb5bd;
    --neutral-600: #6c757d;
    --neutral-700: #495057;
    --neutral-800: #343a40;
    --neutral-900: #212529;
    --neutral-950: #0d1117;

    /* ----------------------------------------------------------
       SURFACE TOKENS — světlý mód (výchozí)
    ---------------------------------------------------------- */
    --surface-base:    var(--neutral-0);
    --surface-subtle:  var(--neutral-50);
    --surface-muted:   var(--neutral-100);
    --surface-overlay: var(--neutral-200);

    /* ----------------------------------------------------------
       TEXT TOKENS
    ---------------------------------------------------------- */
    --text-primary:   var(--neutral-950);
    --text-secondary: var(--neutral-600);
    --text-tertiary:  var(--neutral-500);
    --text-disabled:  var(--neutral-400);
    --text-inverse:   var(--neutral-0);

    /* ----------------------------------------------------------
       BORDER TOKENS
    ---------------------------------------------------------- */
    --border-subtle:  var(--neutral-200);
    --border-default: var(--neutral-300);
    --border-strong:  var(--neutral-400);

    /* ----------------------------------------------------------
       SIDEBAR — vždy tmavý (light i dark mód)
    ---------------------------------------------------------- */
    --sidebar-width:         260px;
    --sidebar-bg:            var(--neutral-950);
    --sidebar-text:          rgba(255, 255, 255, 0.80);
    --sidebar-text-muted:    rgba(255, 255, 255, 0.35);
    --sidebar-border:        rgba(255, 255, 255, 0.07);
    --sidebar-hover-bg:      rgba(255, 255, 255, 0.06);
    --sidebar-active-bg:     rgba(255, 255, 255, 0.09);
    --sidebar-active-accent: hsl(var(--accent-h), var(--accent-s), 62%);

    /* ----------------------------------------------------------
       SHADOWS
    ---------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

    /* ----------------------------------------------------------
       BORDER RADIUS
    ---------------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ----------------------------------------------------------
       TYPOGRAPHY
    ---------------------------------------------------------- */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ----------------------------------------------------------
       TRANSITIONS
    ---------------------------------------------------------- */
    --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-xs:  100ms var(--ease-out);
    --transition-sm:  150ms var(--ease-out);
    --transition-md:  200ms var(--ease-out);
    --transition-lg:  300ms var(--ease-in-out);

    /* ----------------------------------------------------------
       STATUS COLORS
    ---------------------------------------------------------- */
    --color-success:    #16a34a;
    --color-success-bg: #f0fdf4;
    --color-success-border: #bbf7d0;

    --color-error:    #dc2626;
    --color-error-bg: #fef2f2;
    --color-error-border: #fecaca;

    --color-warning:    #d97706;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;

    --color-info:    #2563eb;
    --color-info-bg: #eff6ff;
    --color-info-border: #bfdbfe;
}

/* ----------------------------------------------------------
   DARK MODE OVERRIDES
   Sidebar zůstává tmavý — mění se pouze content area.
---------------------------------------------------------- */
[data-theme="dark"] {
    --surface-base:    var(--neutral-950);
    --surface-subtle:  #161b22;
    --surface-muted:   #21262d;
    --surface-overlay: #30363d;

    --text-primary:   #e6edf3;
    --text-secondary: #8b949e;
    --text-tertiary:  #6e7681;
    --text-disabled:  #484f58;

    --border-subtle:  #21262d;
    --border-default: #30363d;
    --border-strong:  #444c56;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.28), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.32), 0 4px 6px -4px rgba(0, 0, 0, 0.18);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.36), 0 8px 10px -6px rgba(0, 0, 0, 0.18);

    --color-success-bg:     #052e16;
    --color-success-border: #166534;
    --color-error-bg:       #450a0a;
    --color-error-border:   #991b1b;
    --color-warning-bg:     #451a03;
    --color-warning-border: #92400e;
    --color-info-bg:        #0c1a3a;
    --color-info-border:    #1e40af;
}