/* Sawa Coco — Design Tokens (single source of truth)
   Variables only. This file applies no rules to elements, so loading it is
   render-neutral; typography.css / components.css / footer.css consume these.
   Values mirror what the site already uses (Elementor globals + Blocksy palette).
   NOTE: this does NOT override Blocksy's --theme-palette-* or Elementor's
   --e-global-* variables; it is a parallel, human-readable token layer. */
:root {
  /* ---- Type scale (matches the previous font-system.css values exactly) ---- */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-icon: 24px;
  --fs-h3: clamp(22px, 1.375rem + ((1vw - 3.2px) * 0.625), 30px);
  --fs-h2: clamp(30px, 1.875rem + ((1vw - 3.2px) * 1.563), 50px);
  --fs-h1: clamp(36px, 2.25rem + ((1vw - 3.2px) * 1.875), 60px);
  --fs-display: clamp(45px, 2.813rem + ((1vw - 3.2px) * 2.734), 80px);
  --lh-base: 1.6;

  /* ---- Font family (Mulish, local; system stack fallback) ---- */
  --font-sans: "Mulish", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Spacing scale (for future migration of custom CSS) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Brand colors (mirror Elementor --e-global-color-*) ---- */
  --brand-green: #6c914e;
  --brand-green-light: #a0c17f;
  --brand-teal: #2aaba0;
  --brand-mint: #b2f1ea;
  --tint-green: #f4f8f1;
  --tint-green-2: #e3e8dd;

  /* ---- Neutral / theme colors (mirror Blocksy --theme-palette-color-*) ---- */
  --ink: #111518;
  --ink-soft: #3f4245;
  --line: #eaeaec;
  --paper: #ffffff;
  --footer-tan: #a8977b;
  --footer-brown: #7f715c;

  /* ---- Utility ---- */
  --link: #6c914e;
  --telegram: #0088cc;
  --telegram-hover: #005f99;

  /* ---- Containers (mirror Blocksy) ---- */
  --container-normal: 1290px;
  --container-narrow: 750px;

  /* ---- Breakpoints (Blocksy) — reference values ---- */
  --bp-tablet: 999.98px;
  --bp-mobile: 689.98px;
}
