/* ============================================================
   AI Rollout Framework — shared design system
   Visual language: dark slate ink, warm copper "capability"
   accent, muted slate "technology" accent, serif/sans contrast.
   Motion: subtle, sharp, under 400ms, respects reduced motion.
   ============================================================ */

:root {
  /* Core tokens (from the launch page) */
  --ink:        #14171f;
  --ink-2:      #1c2029;
  --ink-3:      #232836;
  --paper:      #f3f1ea;
  --paper-dim:  rgba(243, 241, 234, 0.72);
  --paper-muted:rgba(243, 241, 234, 0.46);
  --capability: #d98a4c;
  --capability-bright: #e69a5c;
  --capability-glow:   rgba(217, 138, 76, 0.16);
  --technology: #6b7789;
  --line:       #2a2f3a;
  --line-capability: rgba(217, 138, 76, 0.32);
  --teal:       #4fb3a5;

  /* Legacy aliases — ported page styles reference these names */
  --navy:        var(--ink);
  --navy-mid:    var(--ink-2);
  --navy-light:  var(--ink-3);
  --amber:       var(--capability);
  --amber-light: var(--capability-bright);
  --amber-glow:  var(--capability-glow);
  --teal-dim:    rgba(79, 179, 165, 0.15);
  --white:       var(--paper);
  --white-dim:   var(--paper-dim);
  --white-muted: var(--paper-muted);
  --border:      var(--line);
  --border-amber:var(--line-capability);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
}

/* Serif-italic accent — the signature treatment for key words */
.serif-accent,
h1 em, h2 em, .section-heading em, .hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--capability);
}

/* Display headings: confident sans, tight tracking */
h1, h2, h3, .section-heading, .hero h1 {
  letter-spacing: -0.01em;
}

/* Text wordmark (placeholder until final logo assets land) */
.wordmark-text {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-text .wm-accent { color: var(--capability); }

/* ── Scroll-triggered reveal (site.js adds .in-view) ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 380ms cubic-bezier(.2,.7,.3,1), transform 380ms cubic-bezier(.2,.7,.3,1);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 340ms cubic-bezier(.2,.7,.3,1), transform 340ms cubic-bezier(.2,.7,.3,1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 350ms; }

/* ── SVG line-draw (site.js adds .in-view to .draw-svg containers) ── */
.draw-svg .draw-line {
  stroke-dasharray: var(--draw-len, 300);
  stroke-dashoffset: var(--draw-len, 300);
  transition: stroke-dashoffset 400ms ease;
}
.draw-svg.in-view .draw-line { stroke-dashoffset: 0; }
.draw-svg.in-view .draw-line.d1 { transition-delay: 60ms; }
.draw-svg.in-view .draw-line.d2 { transition-delay: 140ms; }
.draw-svg.in-view .draw-line.d3 { transition-delay: 220ms; }
.draw-svg.in-view .draw-line.d4 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .draw-svg .draw-line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--capability);
  outline-offset: 3px;
}