/* ShopAngyal V3 — kanonikus design tokenek
   Forrás: a 2026-08-26 előtti főoldal és a kapcsolódó régi oldalak auditja. */

:root {
  color-scheme: light;

  /* Színszerepek */
  --sa-ink: #0e1726;
  --sa-text: #3d4a5c;
  --sa-muted: #68778a;
  --sa-line: #e3e8ef;
  --sa-line-soft: #f0f3f7;
  --sa-line-strong: #c9d3e0;
  --sa-bg: #ffffff;
  --sa-surface: #f6f8fb;
  --sa-surface-raised: #ffffff;
  --sa-brand: #2b3fc7;
  --sa-brand-hover: #1e2e9e;
  --sa-brand-soft: #edeffc;
  --sa-brand-on-dark: #a9b6ff;
  --sa-brand-glow: rgba(43, 63, 199, 0.09);
  --sa-accent: #d2ff4f;
  --sa-accent-hover: #c6f53d;
  --sa-accent-line: #b3e62e;
  --sa-loss: #b42318;
  --sa-loss-soft: #fef0ef;
  --sa-gain: #0b7a5b;
  --sa-gain-soft: #e7f4ef;
  --sa-warning: #b54708;
  --sa-warning-soft: #fff7e6;
  --sa-focus: #ffbf47;
  --sa-on-dark: #f3f6fa;
  --sa-on-dark-muted: #b8c4d2;
  --sa-header-glass: rgba(255, 255, 255, 0.94);
  --sa-dark-glass: rgba(255, 255, 255, 0.04);

  /* Betűk */
  --sa-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sa-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --sa-weight-regular: 400;
  --sa-weight-medium: 500;
  --sa-weight-semibold: 600;
  --sa-weight-bold: 700;
  --sa-weight-extrabold: 800;
  --sa-text-body: 1.0625rem;
  --sa-text-small: 0.9rem;
  --sa-text-micro: 0.78rem;
  --sa-text-lead: 1.16rem;
  --sa-text-h3: 1.15rem;
  --sa-text-h2: clamp(1.7rem, 3.6vw, 2.5rem);
  --sa-text-h1: clamp(2.1rem, 5.2vw, 3.5rem);
  --sa-leading-body: 1.65;
  --sa-leading-copy: 1.35;
  --sa-leading-display: 1.16;
  --sa-tracking-body: -0.005em;
  --sa-tracking-display: -0.03em;

  /* Térközskála */
  --sa-space-1: 0.25rem;
  --sa-space-2: 0.5rem;
  --sa-space-3: 0.75rem;
  --sa-space-4: 1rem;
  --sa-space-5: 1.5rem;
  --sa-space-6: 2rem;
  --sa-space-7: 2.5rem;
  --sa-space-8: 3.25rem;
  --sa-space-9: 4rem;
  --sa-space-10: 5.5rem;
  --sa-space-11: 6rem;

  /* Layout */
  --sa-container: 70rem;
  --sa-container-copy: 47.5rem;
  --sa-container-narrow: 51.25rem;
  --sa-gutter: 1.5rem;
  --sa-grid-gap: 1.375rem;
  --sa-section-space: var(--sa-space-10);

  /* Forma */
  --sa-radius-logo: 0.4375rem;
  --sa-radius-icon: 0.625rem;
  --sa-radius-control: 0.625rem;
  --sa-radius-button: 0.6875rem;
  --sa-radius-card: 0.875rem;
  --sa-radius-panel: 1.25rem;
  --sa-radius-pill: 999px;

  /* Árnyék */
  --sa-shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.06), 0 1px 3px rgba(14, 23, 38, 0.05);
  --sa-shadow-md: 0 4px 12px rgba(14, 23, 38, 0.06), 0 12px 32px rgba(14, 23, 38, 0.07);
  --sa-shadow-lg: 0 8px 24px rgba(14, 23, 38, 0.08), 0 24px 60px rgba(14, 23, 38, 0.1);
  --sa-focus-ring: 0 0 0 3px rgba(43, 63, 199, 0.2);

  /* Mozgás */
  --sa-duration-fast: 120ms;
  --sa-duration-base: 180ms;
  --sa-ease: ease;

  /* Töréspontok dokumentációhoz: 640 / 720 / 900 / 980 px */
}

@media (max-width: 720px) {
  :root {
    --sa-gutter: 1rem;
    --sa-section-space: var(--sa-space-9);
    --sa-text-h1: clamp(2rem, 10vw, 2.5rem);
  }
}

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