/**
 * pneutesty.sk — design tokens (LESS)
 *
 * Theme: "wedding" (light, DaisyUI inspired).
 * Single source of truth pre farby + base typografiu + text/bg utility classes.
 *
 * Pattern:
 *   - CSS custom properties = runtime hodnoty (theme-switch ready)
 *   - LESS aliasy (`@primary` → `var(--color-primary)`) = ergonomika v komponentoch
 */
/* ═══════════════════════════════════════════════════════════════════════
   1. CSS custom properties (DaisyUI wedding theme)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Surface */
  --color-base-100: oklch(98% 0.002 247.839);
  --color-base-200: oklch(96% 0.003 264.542);
  --color-base-300: oklch(92% 0.006 264.531);
  --color-base-content: oklch(21% 0.034 264.665);
  /* Brand */
  --color-primary: #4463B2;
  --color-primary-content: oklch(92% 0.004 286.32);
  --color-secondary: #FFDA17;
  --color-secondary-content: oklch(44% 0.011 73.639);
  /* Accent */
  --color-accent: oklch(80% 0.114 19.571);
  --color-accent-content: oklch(25% 0.092 26.042);
  /* Neutral (dark) */
  --color-neutral: oklch(13% 0.028 261.692);
  --color-neutral-content: oklch(98% 0.002 247.839);
  /* Status */
  --color-info: oklch(54% 0.245 262.881);
  --color-info-content: oklch(97% 0.014 254.604);
  --color-success: oklch(60% 0.118 184.704);
  --color-success-content: oklch(98% 0.014 180.72);
  --color-warning: oklch(68% 0.162 75.834);
  --color-warning-content: oklch(98% 0.026 102.212);
  --color-error: oklch(58% 0.253 17.585);
  --color-error-content: oklch(96% 0.015 12.422);
  /* Radius */
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  /* Sizing */
  --size-selector: 0.28125rem;
  --size-field: 0.28125rem;
  /* Border */
  --border: 1px;
  --depth: 0;
  --noise: 0;
  /* ─── pneutesty extensions (mimo DaisyUI) ───────────────────────── */
  /* Hover/active varianty cez color-mix (oklch zachová percepčný kontrast) */
  --color-primary-hover: color-mix(in oklab, var(--color-primary) 88%, black);
  --color-primary-active: color-mix(in oklab, var(--color-primary) 75%, black);
  --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, white);
  --color-secondary-hover: color-mix(in oklab, var(--color-secondary) 88%, black);
  --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 25%, white);
  --color-accent-hover: color-mix(in oklab, var(--color-accent) 88%, black);
  --color-accent-soft: color-mix(in oklab, var(--color-accent) 18%, white);
  --color-success-soft: color-mix(in oklab, var(--color-success) 14%, white);
  --color-warning-soft: color-mix(in oklab, var(--color-warning) 16%, white);
  --color-error-soft: color-mix(in oklab, var(--color-error) 12%, white);
  --color-info-soft: color-mix(in oklab, var(--color-info) 12%, white);
  --color-border: var(--color-base-300);
  --color-border-strong: color-mix(in oklab, var(--color-base-content) 18%, var(--color-base-100));
  --color-text-muted: color-mix(in oklab, var(--color-base-content) 60%, var(--color-base-100));
  --color-text-subtle: color-mix(in oklab, var(--color-base-content) 40%, var(--color-base-100));
  /* Typography */
  --font-sans: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;
  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 12px 28px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.05);
  /* Focus ring */
  --ring-primary: 0 0 0 3px color-mix(in oklab, var(--color-primary) 30%, transparent);
  --ring-error: 0 0 0 3px color-mix(in oklab, var(--color-error) 30%, transparent);
  /* Motion */
  --transition-fast: 100ms ease-out;
  --transition-base: 150ms ease-out;
  --transition-slow: 250ms ease-out;
  /* Layout */
  --container-max: 1280px;
}
/* ═══════════════════════════════════════════════════════════════════════
   2. LESS aliasy — ergonomika v komponentoch
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   3. Base reset & typografia
   ═══════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  margin: 0;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
  color: var(--color-base-content);
  font-weight: var(--fw-bold);
}
h1 {
  font-size: var(--fs-4xl);
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--fs-xl);
}
h5 {
  font-size: var(--fs-lg);
}
h6 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
p {
  margin: 0 0 var(--space-3);
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-base-200);
  color: var(--color-base-content);
  padding: 1px 6px;
  border-radius: var(--radius-field);
}
small {
  font-size: var(--fs-sm);
}
strong,
b {
  font-weight: var(--fw-semibold);
}
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}
/* ═══════════════════════════════════════════════════════════════════════
   4. Text utility classes (DaisyUI naming)
   ═══════════════════════════════════════════════════════════════════════ */
.text-primary {
  color: var(--color-primary) !important;
}
.text-secondary {
  color: var(--color-secondary) !important;
}
.text-accent {
  color: var(--color-accent) !important;
}
.text-info {
  color: var(--color-info) !important;
}
.text-success {
  color: var(--color-success) !important;
}
.text-warning {
  color: var(--color-warning) !important;
}
.text-error {
  color: var(--color-error) !important;
}
.text-base {
  color: var(--color-base-content) !important;
}
.text-muted {
  color: var(--color-text-muted) !important;
}
.text-subtle {
  color: var(--color-text-subtle) !important;
}
.text-xs {
  font-size: var(--fs-xs);
}
.text-sm {
  font-size: var(--fs-sm);
}
.text-lg {
  font-size: var(--fs-lg);
}
.text-xl {
  font-size: var(--fs-xl);
}
.text-2xl {
  font-size: var(--fs-2xl);
}
.text-3xl {
  font-size: var(--fs-3xl);
}
.text-bold {
  font-weight: var(--fw-bold);
}
.text-semi {
  font-weight: var(--fw-semibold);
}
.text-medium {
  font-weight: var(--fw-medium);
}
.lead {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}
/* ═══════════════════════════════════════════════════════════════════════
   5. Background utility classes
   ═══════════════════════════════════════════════════════════════════════ */
.bg-base-100 {
  background: var(--color-base-100) !important;
}
.bg-base-200 {
  background: var(--color-base-200) !important;
}
.bg-base-300 {
  background: var(--color-base-300) !important;
}
.bg-primary {
  background: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}
.bg-secondary {
  background: var(--color-secondary) !important;
  color: var(--color-secondary-content) !important;
}
.bg-accent {
  background: var(--color-accent) !important;
  color: var(--color-accent-content) !important;
}
.bg-neutral {
  background: var(--color-neutral) !important;
  color: var(--color-neutral-content) !important;
}
.bg-info {
  background: var(--color-info) !important;
  color: var(--color-info-content) !important;
}
.bg-success {
  background: var(--color-success) !important;
  color: var(--color-success-content) !important;
}
.bg-warning {
  background: var(--color-warning) !important;
  color: var(--color-warning-content) !important;
}
.bg-error {
  background: var(--color-error) !important;
  color: var(--color-error-content) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   6. Layout helpers
   ═══════════════════════════════════════════════════════════════════════ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.stack > * + * {
  margin-top: var(--space-4);
}
.stack-sm > * + * {
  margin-top: var(--space-2);
}
.stack-lg > * + * {
  margin-top: var(--space-6);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* ═══════════════════════════════════════════════════════════════════════
   7. Animations
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(-12%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}