/* Digital Presence — web brand tokens (v2, 2026-10-30). Rules: _BRAIN/brand.md → "Web" */

@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Archivo+Narrow:wght@500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Brand colours */
  --dp-evergreen: #0E3B2E;
  --dp-evergreen-hover: #15513F;
  --dp-fern: #2F7D5B;
  --dp-fern-light: #8FD1AE;   /* fern on evergreen backgrounds */
  --dp-gilt: #C9A23F;         /* accent only: never text on white */
  --dp-gold-ink: #8A6A16;     /* gold-coloured text on white */
  --dp-white: #FFFFFF;
  --dp-mint: #E6F1EA;
  --dp-ink: #12201A;
  --dp-muted: #4E5F57;
  --dp-line: #DCE6E0;
  --dp-on-dark-muted: #B9D3C5;

  /* Roles */
  --bg: var(--dp-white);
  --surface: var(--dp-mint);
  --text: var(--dp-ink);
  --text-muted: var(--dp-muted);
  --heading: var(--dp-evergreen);
  --link: var(--dp-fern);
  --border: var(--dp-line);
  --focus: var(--dp-fern);

  /* Type */
  --font-display: "Aptos Display", Aptos, "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: Aptos, "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --font-narrow: "Aptos Narrow", "Archivo Narrow", "Arial Narrow", sans-serif;
  --font-mono: "Aptos Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(2.25rem, 5vw, 3.5rem);   /* 56 */
  --fs-h2: clamp(1.6rem, 3.4vw, 2.125rem); /* 34 */
  --fs-h3: 1.375rem;                      /* 22 */
  --fs-lead: 1.1875rem;                   /* 19 */
  --fs-body: 1.0625rem;                   /* 17 */
  --fs-small: 0.875rem;                   /* 14 */
  --fs-label: 0.75rem;                    /* 12, mono, uppercase, +0.12em */
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --track-label: 0.12em;
  --track-heading: -0.015em;

  /* Space (8px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: clamp(64px, 9vw, 112px);
  --content-max: 1160px;
  --text-max: 65ch;

  /* Shape: crisp, echoing the logo's square frame */
  --radius-btn: 6px;
  --radius-card: 12px;
  --radius-tile: 16px;
  --radius-chip: 999px;
  --border-w: 1px;
  --shadow-raised: 0 1px 2px rgba(14, 59, 46, .06), 0 8px 24px rgba(14, 59, 46, .08);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}

/* Evergreen band: add class="on-evergreen" to a section */
.on-evergreen {
  --bg: var(--dp-evergreen);
  --surface: #15493A;
  --text: var(--dp-white);
  --text-muted: var(--dp-on-dark-muted);
  --heading: var(--dp-white);
  --link: var(--dp-fern-light);
  --border: #24584A;
  --focus: var(--dp-gilt);
  background: var(--bg);
  color: var(--text);
}

body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--track-heading); text-wrap: balance; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dp-gold-ink); }
.on-evergreen .eyebrow { color: var(--dp-gilt); }

/* Gold rule: the signature accent under a key heading (counts as the screen's gold moment) */
.gold-rule { width: 48px; height: 3px; background: var(--dp-gilt); border: 0; margin: var(--s-4) 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); font: 600 1rem/1 var(--font-body); padding: 14px 22px; border-radius: var(--radius-btn); border: 1.5px solid transparent; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn-primary { background: var(--dp-evergreen); color: var(--dp-white); }
.btn-primary:hover { background: var(--dp-evergreen-hover); }
.btn-secondary { background: transparent; color: var(--dp-evergreen); border-color: var(--dp-evergreen); }
.btn-secondary:hover { background: var(--dp-mint); }
.on-evergreen .btn-primary { background: var(--dp-white); color: var(--dp-evergreen); }
.on-evergreen .btn-primary:hover { background: var(--dp-mint); }
.on-evergreen .btn-secondary { color: var(--dp-white); border-color: rgba(255,255,255,.6); }
.on-evergreen .btn-secondary:hover { background: rgba(255,255,255,.08); }

/* Pixel-square list marker (from the logo) */
.list-square { list-style: none; padding: 0; }
.list-square li { position: relative; padding-left: 20px; }
.list-square li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--dp-fern); }

/* Frame corners (from the logo): wrap a stat, quote or image */
.frame { position: relative; padding: var(--s-5); }
.frame::before, .frame::after { content: ""; position: absolute; width: 28px; height: 28px; border: 3px solid var(--dp-evergreen); }
.frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.on-evergreen .frame::before, .on-evergreen .frame::after { border-color: var(--dp-white); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }