/* ==========================================================================
   DESIGN TOKENS: edit this file first when changing the visual theme.
   Brand colors come from the current surfagest.com theme.
   ========================================================================== */
:root {
  /* Brand */
  --color-brand: #22a2f0;        /* Surfagest blue */
  --color-brand-dark: #1781c1;   /* white text on blue (WCAG AA) */
  --color-brand-deep: #0d4f80;   /* gradients, dark bands */
  --color-brand-light: #40d9f1;  /* cyan accent */
  --color-brand-soft: #e8f6fe;   /* tinted backgrounds */
  --gradient-brand: linear-gradient(135deg, #1781c1 0%, #22a2f0 55%, #40d9f1 100%);
  --gradient-text: linear-gradient(100deg, #1781c1 10%, #22a2f0 50%, #2bc4e8 90%);

  /* Roles */
  --color-accent: var(--color-brand);
  --color-accent-text: var(--color-brand-dark);
  --color-accent-strong: #136a9f;
  --color-accent-soft: var(--color-brand-soft);
  --color-btn: var(--color-brand-dark);
  --color-btn-hover: #136a9f;

  /* Neutrals */
  --color-ink: #0b1b2b;
  --color-text: #3d4a57;
  --color-muted: #66727f;
  --color-line: #e4e9ef;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f8fb;
  --color-surface: #ffffff;
  --color-dark: #081a2b;          /* dark band + footer */
  --color-dark-2: #0d2740;
  --color-dark-text: #b9c7d4;

  /* Placeholders */
  --color-ph-bg: #eef3f8;
  --color-ph-stripe: #e5ecf3;
  --color-ph-text: #66727f;

  /* Typography (DM Sans = live site font, loaded in templates.mjs) */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: 1.1875rem;
  --fs-h2: clamp(1.85rem, 1.3rem + 2vw, 2.85rem);
  --fs-h1: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
  --fs-hero: clamp(2.5rem, 1.2rem + 4.4vw, 4.75rem);
  --lh-tight: 1.08;
  --lh-base: 1.65;
  --tracking-tight: -0.03em;

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --header-h: 72px;

  /* Shape */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(11 27 43 / 0.06);
  --shadow: 0 10px 30px -12px rgb(11 27 43 / 0.16);
  --shadow-lg: 0 40px 80px -30px rgb(13 79 128 / 0.35);
  --shadow-brand: 0 14px 30px -12px rgb(23 129 193 / 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-reveal: 850ms;
  --reveal-distance: 28px;
  --stagger: 90ms;
}