/* ===========================================================
   tokens.css — Design system variables
   Brand colors are derived directly from the A1Strategez logo.
   =========================================================== */

:root {
  /* === Brand palette ===================================== */
  --orange: #E47712;
  --orange-deep: #b85a08;
  --orange-light: #FF8A2B;
  --orange-tint: #FAEEDA;   /* pale orange wash — soft "active" fills (diagrams) */
  --gray: #4A4A4A;          /* "Strategez" gray from logo */
  --gray-soft: #6F6F6F;
  --gray-deep: #2D2D2D;
  --ink: #1A1A1A;

  /* === Surfaces ========================================== */
  --paper: #ffffff;
  --bone: #f5f3ef;
  --bone-deep: #ebe7df;

  /* === Rules / dividers ================================== */
  --rule: rgba(74, 74, 74, 0.15);
  --rule-strong: rgba(74, 74, 74, 0.85);
  --line-muted: #B4B2A9;    /* muted neutral — inactive diagram lines, nodes, labels */

  /* === Typography ======================================== */
  --font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* === Layout ============================================ */
  --container-max: 1400px;
  --section-pad-x: 40px;
  --section-pad-y: 100px;
  --nav-height: 70px;

  /* === Easing ============================================ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 768px) {
  :root {
    --section-pad-x: 24px;
    --section-pad-y: 70px;
  }
}