/* ============================================================
   Számlix landing — design tokenek.

   Forrás: Figma Variables (fájl OdDKkBL1b5UsRrZWIt1xve, keret 605:2844).
   Névképzés: kisbetű, a „/” és a szóköz helyett „-”.
     slate/900      → --color-slate-900
     space/24       → --space-24
     radius/xl      → --radius-xl
     Heading/H2 44  → --text-heading-h2-44-*  (osztály: typography.css)

   Ez az egyetlen fájl, ahol hex és px érték szerepelhet. A landing
   szándékosan nem tölti be az app tokens.css-ét: ott a --space-* és a
   --radius-* nevek más értéket jelentenek.

   Csak világos téma van, a Figma is csak ezt tartalmazza.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Színek: slate --- */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* --- Színek: indigo --- */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-500: #6366f1;
  --color-indigo-muted: #bbbce2;

  /* --- Színek: gray --- */
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;

  /* --- Színek: emerald --- */
  --color-emerald-200: #a7f3d0;
  --color-emerald-800: #065f46;

  /* --- Színek: alap --- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* --- Színek: felületek --- */
  --color-surface-page: #f8f9fb;
  --color-surface-indigo-tint: #f5f7ff;
  --color-surface-dark-overlay: #283449;

  /* --- Színek: hero animált háttér (színfoltok) --- */
  --color-hero-bg: #f6f7fb;
  --color-hero-blob-1: #767ef5;
  --color-hero-blob-2: #2376fb;
  --color-hero-blob-3: #6366f1;

  /* --- Lebegő nav magassága ---
     A .nav felépítéséből: gomb (--btn-height, a buttons.css-ből) +
     2 × --space-8 párnázás + 2 × 1 px keret = 62 px. A hero kerete
     (.hero-wrap) ennyivel húzódik a nav alá, hogy a háttere a lap
     tetejéig érjen. */
  --nav-height: calc(var(--btn-height) + 2 * var(--space-8) + 2px);

  /* --- Térköz --- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;

  /* --- Lekerekítés --- */
  --radius-sm: 3px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-full: 9999px;

  /* --- Betűcsalád és -súlyok --- */
  --font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Szövegstílusok ---
     Minden Figma text style négy tokenből áll: -size, -line, -weight,
     -tracking. A letterSpacing a Figmában px-ben van megadva. */

  /* Display */
  --text-display-78-size: 78px;
  --text-display-78-line: 74px;
  --text-display-78-weight: var(--font-weight-regular);
  --text-display-78-tracking: 0px;

  --text-display-60-size: 60px;
  --text-display-60-line: 60px;
  --text-display-60-weight: var(--font-weight-regular);
  --text-display-60-tracking: 0px;

  --text-display-56-size: 56px;
  --text-display-56-line: 56px;
  --text-display-56-weight: var(--font-weight-regular);
  --text-display-56-tracking: -1px;

  /* Heading */
  --text-heading-h2-44-size: 44px;
  --text-heading-h2-44-line: 40px;
  --text-heading-h2-44-weight: var(--font-weight-semibold);
  --text-heading-h2-44-tracking: -1px;

  --text-heading-36-size: 36px;
  --text-heading-36-line: 40px;
  --text-heading-36-weight: var(--font-weight-regular);
  --text-heading-36-tracking: -0.9px;

  --text-heading-30-size: 30px;
  --text-heading-30-line: 36px;
  --text-heading-30-weight: var(--font-weight-regular);
  --text-heading-30-tracking: 0px;

  --text-heading-h3-28-size: 28px;
  --text-heading-h3-28-line: 36px;
  --text-heading-h3-28-weight: var(--font-weight-semibold);
  --text-heading-h3-28-tracking: 0px;

  /* Mobil címsor tokenek (max-width: 768px, 9. pont) */
  --text-section-headline-mobile-size: 28px;
  --text-section-headline-mobile-line: 1.2;
  --text-hero-mobile-size: 41.4px;
  --text-hero-mobile-line: 1.18;

  /* Title */
  --text-title-24-size: 24px;
  --text-title-24-line: 32px;
  --text-title-24-weight: var(--font-weight-regular);
  --text-title-24-tracking: 0px;

  --text-title-24-semibold-size: 24px;
  --text-title-24-semibold-line: 30px;
  --text-title-24-semibold-weight: var(--font-weight-semibold);
  --text-title-24-semibold-tracking: -1px;

  --text-title-20-semibold-size: 20px;
  --text-title-20-semibold-line: 28px;
  --text-title-20-semibold-weight: var(--font-weight-semibold);
  --text-title-20-semibold-tracking: 0px;

  /* Body */
  --text-body-lead-20-size: 20px;
  --text-body-lead-20-line: 28px;
  --text-body-lead-20-weight: var(--font-weight-regular);
  --text-body-lead-20-tracking: 0px;

  --text-body-lead-20-loose-size: 20px;
  --text-body-lead-20-loose-line: 32px;
  --text-body-lead-20-loose-weight: var(--font-weight-regular);
  --text-body-lead-20-loose-tracking: 0px;

  --text-body-18-size: 18px;
  --text-body-18-line: 28px;
  --text-body-18-weight: var(--font-weight-regular);
  --text-body-18-tracking: 0px;

  --text-body-16-size: 16px;
  --text-body-16-line: 24px;
  --text-body-16-weight: var(--font-weight-regular);
  --text-body-16-tracking: 0px;

  --text-body-16-tight-size: 16px;
  --text-body-16-tight-line: 20px;
  --text-body-16-tight-weight: var(--font-weight-regular);
  --text-body-16-tight-tracking: 0px;

  --text-body-15-size: 15px;
  --text-body-15-line: 22px;
  --text-body-15-weight: var(--font-weight-regular);
  --text-body-15-tracking: 0px;

  --text-body-15-semibold-size: 15px;
  --text-body-15-semibold-line: 22px;
  --text-body-15-semibold-weight: var(--font-weight-semibold);
  --text-body-15-semibold-tracking: 0px;

  --text-body-14-size: 14px;
  --text-body-14-line: 20px;
  --text-body-14-weight: var(--font-weight-regular);
  --text-body-14-tracking: 0px;

  --text-body-14-medium-size: 14px;
  --text-body-14-medium-line: 20px;
  --text-body-14-medium-weight: var(--font-weight-medium);
  --text-body-14-medium-tracking: 0px;

  /* Label */
  --text-label-13-semibold-size: 13px;
  --text-label-13-semibold-line: 18px;
  --text-label-13-semibold-weight: var(--font-weight-semibold);
  --text-label-13-semibold-tracking: 0px;

  /* Caption */
  --text-caption-12-size: 12px;
  --text-caption-12-line: 16px;
  --text-caption-12-weight: var(--font-weight-regular);
  --text-caption-12-tracking: 0px;

  /* Overline */
  --text-overline-12-size: 12px;
  --text-overline-12-line: 16px;
  --text-overline-12-weight: var(--font-weight-bold);
  --text-overline-12-tracking: 0px;

  --text-overline-10-size: 10px;
  --text-overline-10-line: 20px;
  --text-overline-10-weight: var(--font-weight-semibold);
  --text-overline-10-tracking: 0.5px;

  /* --- Árnyékok és színátmenet ---
     Nincsenek Figma Variables-ként kezelve, de a get_design_context
     szekciónkénti node-lekérése pontos értéket ad; azt vesszük át
     szó szerint, csak itt, névvel ellátva. */
  --shadow-nav-pill: 0px 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-nav-link: 0px 4px 6px -4px rgba(15, 23, 42, 0.2);
  --shadow-cta-dark: 0px 10px 15px -3px rgba(15, 23, 42, 0.2), 0px 4px 6px -4px rgba(15, 23, 42, 0.2);
  --shadow-hero-badge: 0px 20px 25px rgba(99, 102, 241, 0.2);
  --shadow-audience-badge: 0px 4px 15px rgba(99, 102, 241, 0.2);
  --shadow-soft-1: 0px 1px 1px rgba(0, 0, 0, 0.05);
  --shadow-card: 0px 12px 32px 0px rgba(50, 50, 93, 0.12);
  --shadow-panel: 0px 2px 6px 0px rgba(15, 23, 42, 0.04), 0px 24px 48px -16px rgba(15, 23, 42, 0.08);
  --shadow-toggle-active: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-cta-neutral: 0px 10px 15px -3px rgba(0, 0, 0, 0.2), 0px 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-pricing-card: 0px 50px 100px -20px rgba(50, 50, 93, 0.25), 0px 30px 60px -30px rgba(0, 0, 0, 0.3), inset 0px 1px 1px 1px rgba(255, 255, 255, 0.1);
  --shadow-cta-image: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  --shadow-newsletter: 0px 10px 30px -10px rgba(0, 0, 0, 0.05);
  --color-divider-black-10: rgba(0, 0, 0, 0.1);
  /* A demó-popup (<dialog>) háttérsötétítése — nincs Figma-megfelelője. */
  --color-dialog-backdrop: rgba(15, 23, 42, 0.5);
  --gradient-hero-glow: linear-gradient(to right, rgba(118, 126, 245, 0.6), rgba(80, 147, 254, 0.6));
  --gradient-eyebrow-divider: linear-gradient(to right, #c7d2fe, rgba(199, 210, 254, 0));
  --gradient-pricing-hover-border: linear-gradient(131deg, #818cf8 0%, #a855f7 50%, #4f46e5 100%);
  --gradient-cta-glow: linear-gradient(to left, rgba(238, 242, 255, 0.1), rgba(238, 242, 255, 0));

  /* --- Gombok (közös buttons.css) ---
     Ugyanaz a --btn-* szerződés, mint az app tokens.css-ében, a landing
     palettájából. A landing csak világos témájú. */
  --btn-primary-bg: var(--color-slate-900);
  --btn-primary-bg-hover: var(--color-slate-800);
  --btn-primary-text: var(--color-white);
  --btn-primary-shadow: var(--shadow-cta-dark);
  --btn-primary-shadow-hover: 0px 16px 24px -6px rgba(15, 23, 42, 0.28), 0px 6px 10px -6px rgba(15, 23, 42, 0.24);
  --btn-secondary-bg: var(--color-white);
  --btn-secondary-bg-hover: var(--color-surface-indigo-tint);
  --btn-secondary-border: var(--color-gray-200);
  --btn-secondary-border-hover: var(--color-gray-300);
  --btn-secondary-text: var(--color-slate-900);
  --btn-secondary-shadow: var(--shadow-soft-1);
  --btn-secondary-shadow-hover: var(--shadow-nav-link);
  --btn-ghost-text: var(--color-slate-700);
  --btn-ghost-text-hover: var(--color-slate-900);
  --btn-ghost-bg-hover: var(--color-slate-100);
  --btn-danger-bg: #dc2626;
  --btn-danger-bg-hover: #b91c1c;
  --btn-danger-text: var(--color-white);
  --btn-danger-shadow: 0px 6px 18px -6px rgba(220, 38, 38, 0.5);
  --btn-danger-shadow-hover: 0px 12px 26px -8px rgba(220, 38, 38, 0.45);
  --btn-focus-ring: var(--color-indigo-500);
}