/**
 * Thermo Green design tokens.
 * All brand colors, spacing, radii and shadows are defined here.
 * Do not hardcode brand colors elsewhere — reference these variables.
 */
:root {
  /* Brand colors */
  --tg-blue: #1678b8;
  --tg-green: #009b55;
  --tg-orange: #f5a623;
  --tg-dark-blue: #123b63;

  /* Neutrals */
  --tg-white: #ffffff;
  --tg-background: #f5f8f7;
  --tg-text: #000;
  --tg-muted: #5b6b76;
  --tg-border: #e1e8e6;

  /* Derived / state tones */
  --tg-blue-dark: #125e91;
  --tg-green-dark: #007a43;
  --tg-orange-dark: #d68e12;

  /*
	 * Semantic color roles — used by buttons/CTAs/links instead of the
	 * literal --tg-blue/--tg-green/--tg-orange tokens above, so the
	 * Customizer's Primary/Secondary/Accent color pickers (see
	 * inc/customizer.php) can override them site-wide without editing CSS.
	 */
  --tg-color-primary: var(--tg-blue);
  --tg-color-primary-dark: var(--tg-blue-dark);
  --tg-color-secondary: var(--tg-green);
  --tg-color-secondary-dark: var(--tg-green-dark);
  --tg-color-accent: var(--tg-orange);
  --tg-color-accent-dark: var(--tg-orange-dark);

  /* Layout */
  --tg-container: 1280px;
  --tg-container-narrow: 960px;
  --tg-gutter: 24px;

  /* Radius */
  --tg-radius-sm: 4px;
  --tg-radius: 8px;
  --tg-radius-lg: 16px;

  /* Shadow */
  --tg-shadow-sm: 0 1px 2px rgba(23, 43, 58, 0.06);
  --tg-shadow: 0 4px 16px rgba(23, 43, 58, 0.08);
  --tg-shadow-lg: 0 12px 32px rgba(23, 43, 58, 0.12);

  /* Typography */
  --tg-font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  --tg-font-heading:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;

  /* Type scale (fluid, clamps between mobile and desktop) */
  --tg-text-xs: 0.8125rem;
  --tg-text-sm: 0.9375rem;
  --tg-text-base: 1rem;
  --tg-text-lg: 1.125rem;
  --tg-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --tg-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --tg-text-3xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --tg-text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);

  /* Spacing scale */
  --tg-space-xs: 8px;
  --tg-space-sm: 16px;
  --tg-space-md: 24px;
  --tg-space-lg: 40px;
  --tg-space-xl: 64px;
  --tg-space-2xl: 96px;

  /* Section vertical rhythm */
  --tg-section-space: clamp(48px, 6vw, 96px);

  /* Transitions */
  --tg-transition: 0.2s ease;
  --tg-transition-slow: 0.35s ease;

  /* Z-index scale */
  --tg-z-header: 100;
  --tg-z-dropdown: 110;
  --tg-z-mobile-menu: 120;
  --tg-z-modal: 200;
}

/*
 * Breakpoint reference (CSS custom properties cannot be used inside
 * @media conditions, so these values are documented here and used
 * literally in max-width queries throughout the stylesheets):
 * — 480px  small phones
 * — 600px  large phones
 * — 768px  tablets (portrait)
 * — 1024px tablets (landscape) / small laptops
 * — 1280px desktop
 */