/* ============================================================
   WEBTOWN — Design System (global CSS client extension)
   Tokens + fonts + base typography.
   Forrás: Webtown_Design_System / colors_and_type.css
   ============================================================ */

/* ---------- Brand typefaces (variable fonts, woff2) ---------- */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  /* Brand — green */
  --wt-green-600: #009638;
  --wt-green-500: #00B140;  /* Primary */
  --wt-green-400: #29C75A;
  --wt-green-300: #8BE3A6;
  --wt-green-50:  #E9F8EE;

  /* Brand — navy */
  --wt-navy-900: #0B1A36;   /* Primary dark */
  --wt-navy-800: #112247;
  --wt-navy-700: #1E3052;
  --wt-navy-400: #5C6E8E;

  /* Neutrals */
  --wt-ink-900: #0B1220;
  --wt-ink-700: #2A3344;
  --wt-ink-500: #5B6677;
  --wt-ink-400: #8893A4;
  --wt-line:        #E5E8EC;
  --wt-line-strong: #D2D7DE;
  --wt-cream:  #F6F4EF;
  --wt-paper:  #FAFAF8;
  --wt-white:  #FFFFFF;

  /* Type families */
  --wt-font-display: 'Montserrat', system-ui, sans-serif; /* headings */
  --wt-font-body:    'Nunito', system-ui, sans-serif;     /* body / UI  */
  --wt-font-sans:    var(--wt-font-body);                 /* legacy alias */

  /* Type scale */
  --wt-fs-display-xl: 92px;
  --wt-fs-display-l:  72px;
  --wt-fs-display-m:  56px;
  --wt-fs-h1: 44px;
  --wt-fs-h2: 36px;
  --wt-fs-h3: 28px;
  --wt-fs-h4: 22px;
  --wt-fs-lede:  19px;
  --wt-fs-body:  16px;
  --wt-fs-small: 14px;
  --wt-fs-eyebrow: 12px;

  /* Radii */
  --wt-radius-sm:   10px;
  --wt-radius:      16px;
  --wt-radius-lg:   28px;
  --wt-radius-pill: 999px;

  /* ---- Accent token set -----------------------------------------
     --wt-primary-accent: Style Book inject it via <style> block.
     page-theme fragment JS detects it and skips inline overrides.
     Fragment-level CSS (e.g. .wt-hero-showcase--default) overrides
     at element scope via direct declaration (beats inheritance).   */
  --wt-accent:        var(--wt-primary-accent, var(--wt-green-500));
  --wt-accent-deep:   color-mix(in srgb, var(--wt-accent) 80%, #000000);
  --wt-accent-bright: color-mix(in srgb, var(--wt-accent) 78%, #ffffff);
  --wt-accent-soft:   color-mix(in srgb, var(--wt-accent) 10%, #ffffff);
  --wt-accent-tint:   color-mix(in srgb, var(--wt-accent) 12%, transparent);
}

/* ============================================================
   Base typography (applies on the public site via the master page)
   ============================================================ */
body {
  font-family: var(--wt-font-body);
  color: var(--wt-ink-900);
  font-size: var(--wt-fs-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .wt-display {
  font-family: var(--wt-font-display);
  letter-spacing: -0.02em;
  color: var(--wt-navy-900);
}

/* Optional helper if a wrapper class is preferred over bare body */
.wt-body { font-family: var(--wt-font-body); color: var(--wt-ink-900); }