/* AKMEFORGE design tokens + base, flattened from the Claude Design project's
   tokens/*.css. Fonts are linked from each page's <head> (Archivo, IBM Plex
   Sans, DM Mono) rather than @import-ed here, so they download in parallel. */

:root {
  /* ---- Brand core ---- */
  --navy: #001D5C;
  --ink: #05101F;
  --steel: #B4C4D8;
  --paper: #F7F8FA;
  --white: #FFFFFF;

  /* ---- Navy scale ---- */
  --navy-900: #000F2E;
  --navy-800: #001D5C;
  --navy-700: #10306E;
  --navy-600: #2A4A88;
  --navy-500: #4A69A3;
  --navy-400: #7389BC;
  --navy-300: #A3B2D4;
  --navy-200: #CDD6E8;
  --navy-100: #E7ECF5;

  /* ---- Cool neutrals ---- */
  --neutral-900: #05101F;
  --neutral-800: #1B2A45;
  --neutral-700: #33425C;
  --neutral-600: #4A5A78;
  --neutral-500: #5A7093;
  --neutral-400: #8095B3;
  --neutral-300: #C9D5E4;
  --neutral-250: #E3E9F1;
  --neutral-200: #E0E6EF;
  --neutral-150: #F0F3F8;
  --neutral-100: #F2F5FA;
  --neutral-050: #F7F8FA;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--white);
  --surface-sunken: var(--paper);
  --text-heading: var(--navy);
  --text-body: var(--neutral-700);
  --text-label: var(--neutral-500);
  --text-faint: var(--neutral-400);
  --text-on-brand-muted: var(--neutral-300);
  --border-hairline: var(--neutral-200);
  --border-subtle: var(--neutral-150);
  --border-on-brand: rgba(180, 196, 216, 0.4);
  --focus-ring: var(--navy-200);
  --link: var(--navy);
  --link-hover: var(--ink);

  /* ---- Type ---- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --size-h3: 22px;
  --size-lead: 19px;
  --size-body: 17px;
  --size-body-sm: 15px;
  --size-ui: 14px;
  --size-ui-sm: 12.5px;
  --size-label: 11px;
  --leading-display: 0.94;
  --leading-h2: 1.04;
  --leading-h3: 1.2;
  --leading-body: 1.62;
  --leading-ui: 1.5;
  --tracking-display: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.015em;
  --tracking-label: 0.16em;
  --measure-prose: 62ch;
  --measure-narrow: 46ch;

  /* ---- Spacing ---- */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --container: 1180px;
  --pad-card: clamp(20px, 3vw, 32px);

  /* ---- Effects ---- */
  --radius-ui: 4px;
  --chamfer-lg: 22px;
  --clip-chamfer-br-lg: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%);
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 120ms;
}

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  line-height: var(--leading-ui);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--steel);
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); border-bottom-color: var(--navy); }
a:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

/* Hover states. The design tool expressed these as style-hover attributes;
   !important is what lets them win over the inline styles they modify. */
.hv-nav:hover        { color: var(--white) !important; }
.hv-foot:hover       { color: var(--steel) !important; }
.hv-btn-light:hover  { background: var(--neutral-250) !important; color: var(--navy) !important; }
.hv-btn-ghost:hover  { background: rgba(255, 255, 255, 0.10) !important; color: var(--white) !important; }
.hv-btn-navy:hover   { background: var(--navy-700) !important; color: var(--white) !important; }
.hv-btn-outline:hover { background: var(--navy-100) !important; color: var(--navy) !important; }

@keyframes af-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* Reusable bits of the legal pages and the shared chrome. */
.af-label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.legal-section { border-top: 1px solid var(--border-hairline); padding-top: var(--space-5); }
.legal-section h2 {
  margin: 0; display: flex; gap: var(--space-4); align-items: baseline;
  font-weight: var(--weight-bold); font-size: var(--size-h3);
  letter-spacing: var(--tracking-h3); color: var(--navy);
}
.legal-section h2 span {
  font-family: var(--font-mono); font-size: var(--size-ui-sm);
  font-weight: var(--weight-regular); color: var(--text-label);
}
.legal-section p { margin: var(--space-3) 0 0; font-size: var(--size-body); line-height: var(--leading-body); }