/* ==========================================================================
   Syntonyl — brand layer
   Loaded last (via monochrome.css) on every page. Holds the identity:
   typefaces, palette, contextual tones, focus, selection and motion policy.
   Structure and components live in styles.css; page files add layout only.
   ========================================================================== */

@font-face {
  font-family: "Syntonyl Serif";
  src: url("assets/fonts/SyntonylSerif-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — forest ground, lime signal, sage paper */
  --forest: #00211e;
  --forest-2: #062c28;
  --forest-3: #0c3a34;
  --forest-4: #16493f;
  --lime: #d5fb09;
  --lime-hover: #e2ff4a;
  --paper: #eef2ec;
  --paper-2: #e3e9e1;
  --white: #ffffff;
  --ink: #00211e;
  --ink-2: #24443c;
  --sage: #4e6b61;
  --sage-soft: #547167;
  --line: #d3dcd5;
  --line-strong: #b4c4ba;
  --on-dark: #ffffff;
  --on-dark-2: #b3c8be;
  --on-dark-3: #86a397;
  --line-dark: rgba(214, 236, 224, 0.13);
  --line-dark-strong: rgba(214, 236, 224, 0.26);

  /* Type */
  --font-display: "Syntonyl Serif", "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Light context (default) */
  --fg: var(--ink);
  --fg-2: var(--sage);
  --line-c: var(--line);
  --line-c-strong: var(--line-strong);
  --surface: var(--white);
  --surface-2: var(--paper);
  --mark-c: var(--forest);
  --btn-bg: var(--forest);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--forest-4);
  --ghost-fg: var(--ink);
  --ghost-line: var(--line-strong);
  --focus-c: var(--forest);

  color-scheme: light;
  accent-color: var(--forest);
}

/* Dark context — any forest surface flips the tokens so components adapt. */
.tone-dark,
.site-header,
.hero,
.page-hero-band,
.enterprise-promise,
.enterprise-cta,
.proc-cta,
.dark-cta,
.pricing-cta,
.signal-result,
.ops-monitor,
.error-diagram,
.contact-intro,
.featured,
.site-footer {
  --fg: var(--on-dark);
  --fg-2: var(--on-dark-2);
  --line-c: var(--line-dark);
  --line-c-strong: var(--line-dark-strong);
  --surface: var(--forest-2);
  --surface-2: var(--forest-3);
  --mark-c: var(--lime);
  --btn-bg: var(--lime);
  --btn-fg: var(--forest);
  --btn-bg-hover: var(--lime-hover);
  --ghost-fg: var(--on-dark);
  --ghost-line: var(--line-dark-strong);
  --focus-c: var(--lime);
  color: var(--fg);
}

::selection { background: var(--lime); color: var(--forest); }

:focus-visible {
  outline: 2px solid var(--focus-c);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}