/* ========================================================================
   Famly - Themes & Design Tokens
   Definuje CSS promenne pro dark/light mode, barvy, typografii, radius.
   ======================================================================== */

:root {
  /* === Brand barvy === */
  --brand-primary:        #7C3AED;
  --brand-primary-light:  #A78BFA;
  --brand-primary-dark:   #5B21B6;
  --brand-secondary:      #06B6D4;
  --brand-secondary-light: #67E8F9;
  --brand-secondary-dark: #0E7490;
  --brand-gradient:       linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --brand-gradient-soft:  linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(6,182,212,0.15) 100%);

  /* === Semanticke barvy === */
  --color-success:    #10B981;
  --color-warning:    #F59E0B;
  --color-danger:     #EF4444;
  --color-info:       #3B82F6;

  /* === Typografie === */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  /* === Spacing === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* === Border radius === */
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    24px;
  --r-2xl:   28px;
  --r-3xl:   36px;
  --r-full:  9999px;

  /* === Z-index === */
  --z-base:    1;
  --z-sticky:  10;
  --z-nav:     50;
  --z-modal:   100;
  --z-toast:   500;
  --z-splash:  9999;

  /* === Tranzice === */
  --ease-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;
  --t-slower: 600ms;

  /* === Safe area (iOS notch / dynamic island) === */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* === Layout === */
  --nav-height:    68px;
  --header-height: 64px;
  --max-content-w: 720px;
}

/* ========================================================================
   DARK MODE (default)
   ======================================================================== */

[data-theme="dark"] {
  --bg-base:        #0A0A0F;
  --bg-elevated:    #14141C;
  --bg-overlay:     rgba(10, 10, 15, 0.85);

  --blob-1: #7C3AED;
  --blob-2: #06B6D4;
  --blob-3: #DB2777;
  --blob-4: #8B5CF6;

  --glass-bg:        rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.10);
  --glass-bg-soft:   rgba(255, 255, 255, 0.03);
  --glass-border:    rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.2);

  --text-primary:   rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-tertiary:  rgba(255, 255, 255, 0.50);
  --text-muted:     rgba(255, 255, 255, 0.35);
  --text-inverse:   #0A0A0F;

  --state-hover:  rgba(255, 255, 255, 0.06);
  --state-active: rgba(255, 255, 255, 0.10);
  --state-focus:  rgba(124, 58, 237, 0.4);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.35);
  --shadow-glow-cyan: 0 0 40px rgba(6, 182, 212, 0.3);

  --input-bg:     rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.12);
  --input-text:   rgba(255, 255, 255, 0.95);

  color-scheme: dark;
}

/* ========================================================================
   LIGHT MODE
   ======================================================================== */

[data-theme="light"] {
  --bg-base:        #F5F5F7;
  --bg-elevated:    #FFFFFF;
  --bg-overlay:     rgba(245, 245, 247, 0.85);

  --blob-1: #C4B5FD;
  --blob-2: #67E8F9;
  --blob-3: #F9A8D4;
  --blob-4: #DDD6FE;

  --glass-bg:        rgba(255, 255, 255, 0.65);
  --glass-bg-strong: rgba(255, 255, 255, 0.80);
  --glass-bg-soft:   rgba(255, 255, 255, 0.45);
  --glass-border:    rgba(0, 0, 0, 0.08);
  --glass-border-strong: rgba(0, 0, 0, 0.12);

  --text-primary:   rgba(10, 10, 15, 0.95);
  --text-secondary: rgba(10, 10, 15, 0.72);
  --text-tertiary:  rgba(10, 10, 15, 0.60);
  --text-muted:     rgba(10, 10, 15, 0.52);
  --text-inverse:   #FFFFFF;

  --state-hover:  rgba(0, 0, 0, 0.04);
  --state-active: rgba(0, 0, 0, 0.08);
  --state-focus:  rgba(124, 58, 237, 0.3);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.2);
  --shadow-glow-cyan: 0 0 40px rgba(6, 182, 212, 0.18);

  --input-bg:     rgba(255, 255, 255, 0.85);
  --input-border: rgba(0, 0, 0, 0.10);
  --input-text:   rgba(10, 10, 15, 0.95);

  color-scheme: light;
}

/* ========================================================================
   BAREVNÁ IDENTITA SEKCÍ
   Nastavuje se přes body[data-section="…"] v js/app.js (switchTab).
   Používá se u hero karet (.card-accent), FABu a aktivní položky navigace.
   ======================================================================== */

body {
  --section-accent:   #7C3AED;
  --section-accent-2: #06B6D4;
  --section-grad:  linear-gradient(135deg, rgba(124,58,237,0.22), rgba(6,182,212,0.12));
  --section-glow:  rgba(124,58,237,0.35);
}
body[data-section="budget"] {
  --section-accent: #10B981; --section-accent-2: #06B6D4;
  --section-grad: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(6,182,212,0.10));
  --section-glow: rgba(16,185,129,0.32);
}
body[data-section="meals"] {
  --section-accent: #F59E0B; --section-accent-2: #EC4899;
  --section-grad: linear-gradient(135deg, rgba(245,158,11,0.20), rgba(236,72,153,0.10));
  --section-glow: rgba(245,158,11,0.30);
}
body[data-section="calendar"] {
  --section-accent: #3B82F6; --section-accent-2: #06B6D4;
  --section-grad: linear-gradient(135deg, rgba(59,130,246,0.20), rgba(6,182,212,0.10));
  --section-glow: rgba(59,130,246,0.32);
}
body[data-section="workout"] {
  --section-accent: #06B6D4; --section-accent-2: #7C3AED;
  --section-grad: linear-gradient(135deg, rgba(6,182,212,0.20), rgba(124,58,237,0.10));
  --section-glow: rgba(6,182,212,0.30);
}
body[data-section="contacts"] {
  --section-accent: #EC4899; --section-accent-2: #A78BFA;
  --section-grad: linear-gradient(135deg, rgba(236,72,153,0.20), rgba(167,139,250,0.10));
  --section-glow: rgba(236,72,153,0.30);
}
body[data-section="dogs"] {
  --section-accent: #A78BFA; --section-accent-2: #06B6D4;
  --section-grad: linear-gradient(135deg, rgba(167,139,250,0.20), rgba(6,182,212,0.10));
  --section-glow: rgba(167,139,250,0.30);
}
body[data-section="tasks"] {
  --section-accent: #14B8A6; --section-accent-2: #06B6D4;
  --section-grad: linear-gradient(135deg, rgba(20,184,166,0.20), rgba(6,182,212,0.10));
  --section-glow: rgba(20,184,166,0.30);
}
body[data-section="farm"] {
  --section-accent: #65A30D; --section-accent-2: #CA8A04;
  --section-grad: linear-gradient(135deg, rgba(101,163,13,0.20), rgba(202,138,4,0.12));
  --section-glow: rgba(101,163,13,0.32);
}

/* Světlý režim: barevný akcent jako TEXT ztmavit – zelená/oranžová/tyrkys na
   bílé by jinak neprošly na kontrast. FAB a výplně dál používají živý accent.
   (color-mix má fallback: staré prohlížeče nechají živý accent.) */
[data-theme="light"] .nav-item.active,
[data-theme="light"] .budget-remaining-badge,
[data-theme="light"] .weight-goalbar-pct {
  color: color-mix(in srgb, var(--section-accent), #000 42%);
}

/* ========================================================================
   Plynula tranzice mezi tématy
   ======================================================================== */

html {
  transition:
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}

* {
  transition:
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}

.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}

/* ========================================================================
   Respect prefers-reduced-motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}