/* ============================================================
   SPROAT SYSTEMS DESIGN TOKENS
   Loaded before style.css. Single home for palette, type, and
   base a11y rules. Gold is an accent only: if gold covers more
   than roughly 5% of a viewport, reduce it.
   ============================================================ */

/* ---- Self-hosted fonts (no CDN calls) ---- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../../fonts/fraunces-latin-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../../fonts/inter-latin-var.woff2') format('woff2');
}

:root {
  /* ---- Palette ----
     Restored to the original Sproat Systems brand colors (navy + teal)
     at Ben's request. Token names are historical, from the navy/gold
     proposal; treat --gold-* as "accent" and --navy-* as "brand dark". */
  --navy-900: #1B2A3D; /* primary text, header/footer background */
  --navy-700: #1A2535; /* dark screens, deep section backgrounds */
  --gold-500: #3BB8C4; /* accent: CTAs, signature line, icons */
  --gold-300: #2FA3AE; /* hover states */
  --accent-text: #156A72; /* accent for TEXT on light backgrounds (WCAG AA safe) */
  --paper:    #F5F7FA; /* light section background */
  --ink-600:  #6B7280; /* subtle text on light */

  /* Derived tints (alpha of palette colors only) */
  --gold-tint-strong: rgba(59, 184, 196, 0.30);
  --gold-tint:        rgba(59, 184, 196, 0.14);
  --gold-tint-faint:  rgba(59, 184, 196, 0.07);
  --navy-tint:        rgba(27, 42, 61, 0.12);
  --navy-tint-faint:  rgba(27, 42, 61, 0.06);

  /* ---- Typography ---- */
  /* Display face: headlines only. Body and UI: Inter. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale: 1.25 ratio on a 17px base.
     17 / 21 / 27 / 33 / 41; top heading capped 44 desktop, 32 mobile. */
  --text-base: 17px;
  --text-sm: 14px;
  --text-md: 21px;
  --text-lg: 27px;
  --text-xl: 33px;
  --text-display: clamp(32px, 4.5vw, 44px);

  /* ---- Shape ---- */
  /* Flat cards, one radius. No drop-shadow stacks, no gradients. */
  --radius: 8px;

  /* ---- Focus ---- */
  --focus-ring: 2px solid var(--gold-500);
}

/* ---- Quality floor: visible keyboard focus ---- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Quality floor: reduced motion ----
   Signature flow line renders static; everything else settles. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   SIGNATURE ELEMENT: gold flow line (1.5px) with nodes.
   Used on Home, AI Automation, and Complete Solution only.
   ============================================================ */
.flow-line {
  display: flex;
  justify-content: center;
  padding: 0;
  line-height: 0;
}

.flow-line svg {
  display: block;
}

.flow-line .flow-line-path {
  stroke: var(--gold-500);
  stroke-width: 1.5;
  fill: none;
}

.flow-line .flow-line-node {
  fill: var(--gold-500);
}

@media (prefers-reduced-motion: no-preference) {
  .flow-line .flow-line-path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: flow-line-draw 1.2s ease-out forwards;
  }

  @keyframes flow-line-draw {
    to { stroke-dashoffset: 0; }
  }
}