/* assets/css/jw-tokens.css */
:root {
  /* =========================
     Typography (font presets)
     ========================= */

  /* 1) System */
  --jw-font-system: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* 2) Serif */
  --jw-font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;

  /* 3) Sans (Rounded feel) — uses common rounded-ish fallbacks
        (If you later load a real rounded font like Nunito, it will take priority) */
  --jw-font-rounded: "Nunito", "Quicksand", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* 4) Playful (Comic-like but NOT Comic Sans)
        (If you load "Comic Neue" / "Patrick Hand", it will take priority) */
  --jw-font-playful: "Comic Neue", "Patrick Hand", "Kalam", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Active font tokens (defaults) */
  --jw-font: var(--jw-font-system);
  --jw-font-headings: var(--jw-font);

  /* (optional) weight tweaks */
  --jw-font-weight: 400;
  --jw-font-weight-bold: 600;

  /* =========================
     Typography (font sizes)
     ========================= */

  --jw-lh-tight: 1.2;
  --jw-lh: 1.35;
  --jw-lh-relaxed: 1.6; 
	
  /* Spacing */
  --jw-space-1: 4px;
  --jw-space-2: 8px;
  --jw-space-3: 12px;
  --jw-space-4: 16px;
  --jw-space-5: 20px;
  --jw-space-6: 24px;

  /* Radius */
  --jw-radius-1: 8px;
  --jw-radius-2: 10px;
  --jw-radius-3: 12px;

  /* Hit targets */
  --jw-hit: 40px; /* icon buttons etc. */
	
  /* Font scaling multiplier (accessibility) */
  --jw-font-scale: 1;	
}


:root {
  --jw-fs-1: calc(11px * var(--jw-font-scale));
  --jw-fs-2: calc(12px * var(--jw-font-scale));
  --jw-fs-3: calc(13px * var(--jw-font-scale));
  --jw-fs-4: calc(15px * var(--jw-font-scale));
  --jw-fs-5: calc(18px * var(--jw-font-scale));
  --jw-fs-6: calc(22px * var(--jw-font-scale));
}


/* =========================
   Font preset switching
   ========================= */
:root[data-jw-font="system"]{
  --jw-font: var(--jw-font-system);
  --jw-font-headings: var(--jw-font);
}

:root[data-jw-font="serif"]{
  --jw-font: var(--jw-font-serif);
  --jw-font-headings: var(--jw-font);
}

:root[data-jw-font="rounded"]{
  --jw-font: var(--jw-font-rounded);
  --jw-font-headings: var(--jw-font);
}

:root[data-jw-font="playful"]{
  --jw-font: var(--jw-font-playful);
  --jw-font-headings: var(--jw-font);
}


/* Default (current behavior) */
:root[data-jw-font-scale="default"] {
  --jw-font-scale: 1;
}

/* +1 step (comfortable reading) */
:root[data-jw-font-scale="large"] {
  --jw-font-scale: 1.2;
}

/* +2 steps (accessibility / low vision) */
:root[data-jw-font-scale="xlarge"] {
  --jw-font-scale: 1.4;
}