/* 6SD Template Library — design tokens (the theming layer).
   This is the file you edit per client and per direction. Each direction ships its own
   theme block; for a client, override the brand color + the two fonts to match their brand.
   Defaults below are a neutral, professional baseline. */

:root {
  /* Brand color (override per client). Accent is the call-to-action / highlight. */
  --color-accent: #1d4ed8;
  --color-accent-hover: #1e40af;
  --color-accent-contrast: #ffffff;

  /* Neutrals */
  --color-bg: #ffffff;
  --color-surface: #f6f7f9;
  --color-border: #e3e6ea;
  --color-text: #14181f;
  --color-text-muted: #515a66;
  --color-text-invert: #ffffff;

  /* Dark sections (hero overlays, premium direction) */
  --color-dark-bg: #0e1116;
  --color-dark-text: #f3f5f8;
  --color-dark-muted: #aab3bf;

  /* Type. Two families only: one display (headings), one body.
     Approved, readable, non-AI options:
       body: Inter, Roboto, Lato, "Work Sans", "Source Sans 3", "DM Sans", "Libre Franklin"
       display: "Playfair Display", Poppins, Sora, Fraunces, "Libre Franklin" (bold) */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Type scale (fluid, mobile-first). Deliberate hierarchy, not a wall of one size. */
  --fs-hero: clamp(2.25rem, 6vw, 4rem);
  --fs-h1: clamp(1.9rem, 4.5vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.9rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Shape + depth */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow: 0 4px 12px rgba(16, 24, 40, 0.08), 0 12px 28px rgba(16, 24, 40, 0.08);
  --container: 1140px;
  --container-narrow: 760px;

  --transition: 180ms ease;
}