/* Alder design tokens — an editorial, calm consulting look.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:ital,wght@0,400;1,400&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #F7F7F2;            /* page (warm paper) */
  --surface: #FFFFFF;       /* cards, buttons on paper */
  --surface-2: #EFEDE7;     /* chips, soft panels */
  --surface-3: #E9E7E0;     /* alternate bands */
  --surface-4: #E1DCD5;     /* warm beige bands (testimonials, blog, case panels) */
  --ink-bg: #191818;        /* dark cards, footer */
  --ink-2: #22201F;         /* raised panels, chips and round buttons on dark */
  --ink-line: #312F2E;      /* borders on dark panels */

  /* ── Text ── */
  --text: #191818;          /* headings + body (body at 80% opacity) */
  --text-2: rgba(25, 24, 24, .8);
  --muted: #6D6962;         /* captions, meta */
  --on-dark: #F7F7F2;
  --on-dark-2: rgba(247, 247, 242, .6);

  /* ── Lines ── */
  --line: #DCDAD3;          /* dividers on paper */
  --line-2: #C3C3C3;        /* button borders */
  --line-dark: rgba(247, 247, 242, .16);

  /* ── Brand / accent ── */
  --accent: #191818;        /* the brand is ink on paper; colour comes from photography */
  --accent-soft: #EFEDE7;
  --on-accent: #FFFFFF;
  /* Brand slots — filled per build by palette/palette.py (palette/slots.json). Demo values shown.
     The ink --accent is part of the look and never changes. */
  --ember: #D9531E;         /* warm orange from the gradient art (sparingly: dots, hovers) */
  --ember-2: #B8243A;       /* deep red end of the gradient */
  /* Ink = the same hue made dark enough for TEXT (≥5:1 on paper). Dots, bars and the art keep the vivid
     colour above; if a build ever sets text in the brand colour it uses the -ink token. The palette sets both. */
  --ember-ink: #BD4003;
  --ember-2-ink: #B8243A;
  --art-wash: none;         /* demo: none (the orange-to-red art photos show as they are). A build's palette
                               sets a gradient here; .art-wash layers it over the gradient-art photos with
                               mix-blend-mode: color, so the glow takes the brand hues and keeps its light. */

  /* ── Data / status — never change (--danger shares the demo red, but keeps its meaning) ── */
  --success: #3F7D4E; --warning: #C98A1B; --danger: #B8243A; --info: #3D5A80;

  /* ── Fonts ── */
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "IBM Plex Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 6px; --r-sm: 10px; --r-btn: 14px; --r: 16px; --r-lg: 20px; --r-pill: 9999px;

  /* ── Spacing / layout ── */
  --container: 1272px;      /* content width (164px margins at 1600) */
  --gutter: 24px;
  --section: 160px;         /* vertical rhythm between sections */
  --nav-h: 88px;

  /* ── Shadows ── */
  --shadow-card: 0 1px 2px rgba(25, 24, 24, .04), 0 18px 40px -24px rgba(25, 24, 24, .25);
  --shadow-float: 0 24px 60px -20px rgba(25, 24, 24, .35);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .9s;
}

/* ── Type scale (IBM Plex Serif headings with italic emphasis via <em>; Plex Sans body) ── */
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.02; letter-spacing: -2.5px; color: var(--text); }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1.06; letter-spacing: -2.5px; color: var(--text); }
.t-h3 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -2px; color: var(--text); }
.t-h4 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -1px; color: var(--text); }
.t-h5 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: -.5px; color: var(--text); }
.t-h6 { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.3; letter-spacing: -.5px; color: var(--text); }
.t-h1 em, .t-h2 em, .t-h3 em, .t-h4 em, .t-h5 em, .t-h6 em { font-style: italic; }
.t-body { font-size: 16px; line-height: 1.5; letter-spacing: -.4px; color: var(--text-2); }
.t-small { font-size: 14px; line-height: 1.5; letter-spacing: -.25px; }
.t-label { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: .8px; text-transform: uppercase; }
.t-medium { font-weight: 500; }
.t-h1, .t-h2, .t-h3, .t-h4 { text-wrap: pretty; }

@media (max-width: 900px) {
  .t-h1 { font-size: 44px; letter-spacing: -1.6px; }
  .t-h2 { font-size: 36px; letter-spacing: -1.6px; }
  .t-h3 { font-size: 30px; letter-spacing: -1.2px; }
  .t-h4 { font-size: 26px; }
}

/* ── Motion off: reduced motion + ?static (alder.js adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }