/* ============================================================================
   brand.css — core brand layer (load first, site-wide)
   ----------------------------------------------------------------------------
   Intentionally light: design tokens (color, type, spacing), a tiny reset,
   base element typography, and a couple of shared primitives (.container,
   .btn, .eyebrow). Page-specific look-and-feel lives in per-page stylesheets
   (e.g. home.css) loaded via the `head_css` block in base.html.
   ========================================================================== */

:root {
  /* ---- Brand palette --------------------------------------------------- */
  --c-ink: #1c1c1c;        /* header text */
  --c-body: #2a2f36;       /* body text */
  --c-muted: #5b6878;      /* secondary text */
  --c-primary: #0064e0;    /* primary accent: links, primary actions */
  --c-primary-dark: #004fb0;
  --c-secondary: #3574e3;  /* lighter blue: secondary accent / on-dark emphasis */
  --c-accent: var(--c-secondary);
  --c-dark: #0a1626;       /* plain dark section background */
  --c-dark-2: #0f1f38;     /* plain dark section accent */
  --c-surface: #ffffff;
  --c-subtle: #f4f7fb;     /* light section background */
  --c-border: #e3e8ef;

  /* Cinematic hero glow stops (used sparingly — hero only). */
  --hero-base: #030708;
  --hero-glow: rgba(25, 55, 63, 0.75);
  --hero-glow-mid: rgba(12, 28, 34, 0.55);

  /* ---- Type ------------------------------------------------------------
     Manrope gives the product a precise, contemporary voice. The system stack
     keeps text stable and readable if the webfont is unavailable. */
  --font-sans: "Manrope", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --leading-body: 1.65;
  --leading-heading: 1.08;
  --tracking-body: -0.006em;
  --tracking-heading: -0.035em;

  /* ---- Spacing scale --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Misc ------------------------------------------------------------ */
  --radius: 0.625rem;
  --radius-lg: 1rem;
  --container: 75rem;   /* 1200px marketing grid */
  --measure: 46rem;     /* editorial measure */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  font-family: var(--font-sans);
  line-height: var(--leading-body);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: var(--measure);   /* content pages stay a readable width */
  padding: 1rem;
  color: var(--c-body);
  background: var(--c-surface);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Marketing pages opt out of the readable-column body to allow full-bleed
   sections; inner content is re-constrained with .container. */
body.page-wide {
  max-width: none;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-ink);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-weight: 700; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

img {
  max-width: 100%;
  height: auto; /* keep aspect ratio; width/height attrs prevent layout shift */
}

a {
  color: var(--c-primary);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

/* Layout and components live in design-system.css. This file intentionally
   stops at foundations: tokens, reset, and element defaults. */