/**
 * Thylo design tokens — single source of truth for the CSS-only revamp.
 * Logo blues + white + ink. Referenced by site-typography, site-theme, site-runtime.
 */
:root {
  /* Brand */
  --thylo-blue: #38b6ff;
  --thylo-blue-dark: #1aa3e0;
  --thylo-blue-hover: #2a9de8;
  --thylo-white: #ffffff;
  --thylo-ink: #1e1e1e;
  --thylo-ink-muted: #333333;
  --thylo-ink-soft: #6b6b6b;
  --thylo-surface-muted: #f7f8fa;
  --thylo-border: rgba(0, 0, 0, 0.08);
  --thylo-border-strong: rgba(0, 0, 0, 0.12);

  /* Typography */
  --thylo-font-body: Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;
  --thylo-font-heading: "Poppins", var(--thylo-font-body);
  --thylo-prose-max: 70ch;

  /* Type scale (fluid) */
  --thylo-text-h1: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  --thylo-text-h2: clamp(1.4rem, 1.15rem + 1.4vw, 1.9rem);
  --thylo-text-h3: clamp(1.2rem, 1.05rem + 0.8vw, 1.4rem);
  --thylo-text-body: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  --thylo-leading-body: 1.6;
  --thylo-leading-heading: 1.2;
  --thylo-tracking-heading: -0.02em;

  /* Spacing */
  --thylo-space-section-y: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --thylo-space-section-y-sm: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --thylo-space-block: clamp(1rem, 0.75rem + 1vw, 1.5rem);

  /* Radii */
  --thylo-radius-btn: 10px;
  --thylo-radius-input: 8px;
  --thylo-radius-card: 12px;

  /* Shadows — soft only */
  --thylo-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
  --thylo-shadow-none: none;

  /* Motion */
  --thylo-transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}