/* =========================================================================
   WebTermék — Design tokenek
   Márkaszínek, tipográfia, térköz-skála, törésponti referenciák.
   ========================================================================= */

:root {
  /* --- Márkaszínek (rögzített paletta) --- */
  --wt-brand: #0A3B25;
  --wt-brand-dark: #071F16;
  --wt-light: #FCF7F0;
  --wt-gray: #C3C7C2;
  --wt-gold: #D8C2A4;
  --wt-success: #22C55E;

  /* Levezetett árnyalatok (a rögzített paletta funkcionális kiegészítései) */
  --wt-brand-soft: #0F4A30;
  --wt-text-muted-on-light: #4B564D;
  --wt-surface-tint: #F4EEE3;
  --wt-border-dark: #16362A;

  /* --- Világos téma (alapértelmezett) --- */
  --bg: var(--wt-light);
  --surface: #FFFFFF;
  --surface-alt: var(--wt-surface-tint);
  --text-primary: var(--wt-brand-dark);
  --text-secondary: var(--wt-text-muted-on-light);
  --text-on-brand: var(--wt-light);
  --border: var(--wt-gray);
  --border-soft: #E4E1D6;
  --accent: var(--wt-brand);
  --accent-gold: var(--wt-gold);
  --success: var(--wt-success);

  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-border: rgba(255, 255, 255, 0.45);
  --panel-glass-bg: rgba(10, 59, 37, 0.82);
  --panel-glass-border: rgba(216, 194, 164, 0.28);

  --shadow-sm: 0 1px 2px rgba(7, 31, 22, 0.06);
  --shadow-md: 0 8px 24px rgba(7, 31, 22, 0.10);
  --shadow-lg: 0 16px 40px rgba(7, 31, 22, 0.16);

  /* --- Forma --- */
  --radius: 4px;
  --radius-sm: 2px;

  /* --- Tipográfia --- */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- Térköz-skála --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-width: 1200px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Sötét mélyzöld téma --- */
:root[data-theme='dark'] {
  --bg: var(--wt-brand-dark);
  --surface: #0D2A1C;
  --surface-alt: #0F3323;
  --text-primary: var(--wt-light);
  --text-secondary: var(--wt-gray);
  --text-on-brand: var(--wt-light);
  --border: var(--wt-border-dark);
  --border-soft: #123425;
  --accent: var(--wt-gold);
  --accent-gold: var(--wt-gold);
  --success: var(--wt-success);

  --glass-bg: rgba(13, 42, 28, 0.6);
  --glass-border: rgba(216, 194, 164, 0.14);
  --panel-glass-bg: rgba(5, 20, 14, 0.85);
  --panel-glass-border: rgba(216, 194, 164, 0.22);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}