/*
 * HerbaScan Design Tokens
 * ----------------------------------------------------------------------------
 * Zdroj pravdy pro vizuální design systém aplikace HerbaScan.
 * Verze: 1.0 (2026-04-29) — placeholder brand (čeká se na brandbook HERBAVITA).
 *
 * Předpis: predpis-design.md sekce 6
 * Použití: <link rel="stylesheet" href="tokens.css"> v každém prototypu.
 *          Po schválení merge do wp-theme/hbs-theme/style.css :root.
 *
 * Konvence: --hbs-{kategorie}-{varianta}
 *           Sémantické aliasy v --hbs-{role} (např. --hbs-bg, --hbs-text).
 */

:root {
	/* ----------------------------------------------------------------------
	 * 6.1 Barvy — neutrální (gray scale)
	 * ---------------------------------------------------------------------- */
	--hbs-gray-50:   #fafafa;
	--hbs-gray-100:  #f4f4f5;
	--hbs-gray-200:  #e4e4e7;
	--hbs-gray-300:  #d4d4d8;
	--hbs-gray-400:  #a1a1aa;
	--hbs-gray-500:  #71717a;
	--hbs-gray-600:  #52525b;
	--hbs-gray-700:  #3f3f46;
	--hbs-gray-800:  #27272a;
	--hbs-gray-900:  #18181b;

	/* ----------------------------------------------------------------------
	 * 6.1 Akcent primární (zelená — HERBAVITA / HerbaPORTA brand #2DBE68)
	 * Aktualizováno 2026-06-01 dle klientova designu (userdesign).
	 * ---------------------------------------------------------------------- */
	--hbs-accent-50:   #ebfaf1;
	--hbs-accent-100:  #cdf1dd;
	--hbs-accent-200:  #a0e6bf;
	--hbs-accent-300:  #6bd79b;
	--hbs-accent-400:  #41c87f;
	--hbs-accent-500:  #2DBE68;  /* brand green */
	--hbs-accent-600:  #1F9B53;  /* trend up / hover */
	--hbs-accent-700:  #18803f;
	--hbs-accent-800:  #145f30;
	--hbs-accent-900:  #0c3a1d;

	/* ----------------------------------------------------------------------
	 * 6.1 Sémantické (success / warning / danger / info)
	 * ---------------------------------------------------------------------- */
	--hbs-success-50:   #f0fdf4;
	--hbs-success-100:  #dcfce7;
	--hbs-success-500:  #16a34a;
	--hbs-success-700:  #15803d;

	--hbs-warning-50:   #fffbeb;
	--hbs-warning-100:  #fef3c7;
	--hbs-warning-500:  #d97706;
	--hbs-warning-700:  #b45309;

	--hbs-danger-50:    #fef2f2;
	--hbs-danger-100:   #fee2e2;
	--hbs-danger-500:   #dc2626;
	--hbs-danger-700:   #b91c1c;

	--hbs-info-50:      #eff6ff;
	--hbs-info-100:     #dbeafe;
	--hbs-info-500:     #0ea5e9;
	--hbs-info-700:     #0369a1;

	/* ----------------------------------------------------------------------
	 * 6.1 Mastitis class — diagnostické 5-úrovňové
	 * (KLÍČOVÉ — vždy doplnit ikonou a labelem, nikdy jen barva)
	 * ---------------------------------------------------------------------- */
	--hbs-mastitis-healthy:           #16a34a;  /* zdravá */
	--hbs-mastitis-subclinical:       #eab308;  /* subklinická */
	--hbs-mastitis-clinical-mild:     #f59e0b;  /* klinická mírná */
	--hbs-mastitis-clinical-moderate: #ea580c;  /* klinická střední */
	--hbs-mastitis-clinical-severe:   #dc2626;  /* klinická těžká */

	/* světlá pozadí pro badge variants */
	--hbs-mastitis-healthy-bg:           #f0fdf4;
	--hbs-mastitis-subclinical-bg:       #fefce8;
	--hbs-mastitis-clinical-mild-bg:     #fffbeb;
	--hbs-mastitis-clinical-moderate-bg: #fff7ed;
	--hbs-mastitis-clinical-severe-bg:   #fef2f2;

	/* ----------------------------------------------------------------------
	 * 6.1 Sample status — 5 stavů
	 * ---------------------------------------------------------------------- */
	--hbs-status-pending:    var(--hbs-gray-500);
	--hbs-status-analyzing:  var(--hbs-info-500);
	--hbs-status-analyzed:   var(--hbs-success-500);
	--hbs-status-failed:     var(--hbs-danger-500);
	--hbs-status-rejected:   var(--hbs-gray-500);

	/* ----------------------------------------------------------------------
	 * 6.1 Sémantické aliasy (high-level — používat v komponentách)
	 * ---------------------------------------------------------------------- */
	--hbs-bg:            var(--hbs-gray-50);
	--hbs-surface:       #ffffff;
	--hbs-surface-alt:   var(--hbs-gray-100);
	--hbs-border:        var(--hbs-gray-200);
	--hbs-border-strong: var(--hbs-gray-300);
	--hbs-text:          var(--hbs-gray-900);
	--hbs-text-secondary: var(--hbs-gray-700);
	--hbs-text-muted:    var(--hbs-gray-500);
	--hbs-text-on-accent: #ffffff;
	--hbs-link:          var(--hbs-accent-600);
	--hbs-link-hover:    var(--hbs-accent-700);

	/* aliasy pro backward-compat s aktuálním hbs-theme/style.css */
	--hbs-primary:       var(--hbs-accent-500);
	--hbs-primary-dark:  var(--hbs-accent-700);
	--hbs-accent:        var(--hbs-accent-500);
	--hbs-muted:         var(--hbs-text-muted);

	/* ----------------------------------------------------------------------
	 * Chrome HerbaPORTA — tmavá navigace / app shell (2026-06-01)
	 * Světlý obsah + tmavý chrome dle klientova designu.
	 * ---------------------------------------------------------------------- */
	--hbs-nav-bg:          #0E1517;
	--hbs-nav-surface:     #1a2426;
	--hbs-nav-text:        #e7ebec;
	--hbs-nav-text-muted:  #9aa6a3;
	--hbs-nav-border:      rgba(255, 255, 255, 0.08);
	--hbs-nav-active-bg:   rgba(45, 190, 104, 0.16);
	--hbs-nav-active-text: #36cf76;

	/* ----------------------------------------------------------------------
	 * 6.2 Typografie
	 * ---------------------------------------------------------------------- */
	--hbs-font-sans:    'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--hbs-font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

	/* aliasy pro backward-compat */
	--hbs-font:         var(--hbs-font-sans);

	/* Velikosti (modular scale ~1.2) */
	--hbs-text-xs:    12px;
	--hbs-text-sm:    14px;
	--hbs-text-base:  16px;
	--hbs-text-lg:    18px;
	--hbs-text-xl:    20px;
	--hbs-text-2xl:   24px;
	--hbs-text-3xl:   30px;
	--hbs-text-4xl:   36px;

	/* Weights — žádný 700+ (Swiss minimal) */
	--hbs-font-regular:  400;
	--hbs-font-medium:   500;
	--hbs-font-semibold: 600;

	/* Line heights */
	--hbs-leading-tight:  1.25;
	--hbs-leading-normal: 1.5;
	--hbs-leading-loose:  1.7;

	/* Letter spacing */
	--hbs-tracking-tight:  -0.01em;
	--hbs-tracking-normal: 0;
	--hbs-tracking-wide:   0.05em;

	/* ----------------------------------------------------------------------
	 * 6.3 Spacing (4px grid)
	 * ---------------------------------------------------------------------- */
	--hbs-space-0:   0;
	--hbs-space-1:   4px;
	--hbs-space-2:   8px;
	--hbs-space-3:   12px;
	--hbs-space-4:   16px;
	--hbs-space-5:   20px;
	--hbs-space-6:   24px;
	--hbs-space-8:   32px;
	--hbs-space-10:  40px;
	--hbs-space-12:  48px;
	--hbs-space-16:  64px;
	--hbs-space-20:  80px;

	/* ----------------------------------------------------------------------
	 * 6.4 Border radius
	 * ---------------------------------------------------------------------- */
	--hbs-radius-sm:   4px;
	--hbs-radius-md:   8px;
	--hbs-radius-lg:   12px;
	--hbs-radius-full: 9999px;

	/* alias backward-compat */
	--hbs-radius:      var(--hbs-radius-md);

	/* ----------------------------------------------------------------------
	 * 6.5 Shadows (subtle, žádné barevné, žádné inset)
	 * ---------------------------------------------------------------------- */
	--hbs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--hbs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--hbs-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
	--hbs-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);

	/* alias backward-compat */
	--hbs-shadow:    var(--hbs-shadow-sm);

	/* ----------------------------------------------------------------------
	 * 6.6 Z-index scale
	 * ---------------------------------------------------------------------- */
	--hbs-z-base:        0;
	--hbs-z-dropdown:    10;
	--hbs-z-sticky:      20;
	--hbs-z-drawer:      30;
	--hbs-z-modal:       40;
	--hbs-z-popover:     50;
	--hbs-z-toast:       60;
	--hbs-z-tooltip:     70;

	/* ----------------------------------------------------------------------
	 * 6.7 Motion / transitions
	 * ---------------------------------------------------------------------- */
	--hbs-duration-fast:   150ms;
	--hbs-duration-normal: 200ms;
	--hbs-duration-slow:   300ms;

	--hbs-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--hbs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ----------------------------------------------------------------------
	 * 6.8 Breakpoints (jen pro JS reference; CSS používá @media s pixely)
	 * ---------------------------------------------------------------------- */
	--hbs-bp-sm:   640px;
	--hbs-bp-md:   768px;
	--hbs-bp-lg:   1024px;
	--hbs-bp-xl:   1280px;
	--hbs-bp-2xl:  1536px;
}

/* Dark mode (volitelný — primární je light) */
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"],
	:root[data-theme="dark"] {
		--hbs-bg:            #0a0a0a;
		--hbs-surface:       #18181b;
		--hbs-surface-alt:   #27272a;
		--hbs-border:        #27272a;
		--hbs-border-strong: #3f3f46;
		--hbs-text:          #fafafa;
		--hbs-text-secondary: #d4d4d8;
		--hbs-text-muted:    #a1a1aa;

		--hbs-mastitis-healthy-bg:           #052e16;
		--hbs-mastitis-subclinical-bg:       #422006;
		--hbs-mastitis-clinical-mild-bg:     #451a03;
		--hbs-mastitis-clinical-moderate-bg: #431407;
		--hbs-mastitis-clinical-severe-bg:   #450a0a;
	}
}

/* Reduced motion — vyrušit animace pro WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--hbs-duration-fast:   0ms;
		--hbs-duration-normal: 0ms;
		--hbs-duration-slow:   0ms;
	}
}

/* High-contrast mode pro tablet stable mode (sekce 12.3) */
:root[data-stable-mode="true"] {
	--hbs-text:          #000000;
	--hbs-text-secondary: var(--hbs-gray-800);
	--hbs-text-muted:    var(--hbs-gray-700);
	--hbs-border:        var(--hbs-gray-400);
	--hbs-border-strong: var(--hbs-gray-600);
}