/* Esperto brand tokens — Brandguide 1.1 (Studio Pelé).
   Blue tints in 20% steps are allowed here (product UI, not marketing).
   Logo files keep their own orange (#f15a31); the UI uses #f16529. */
:root {
  /* Primary */
  --blue: #3290ce;
  --blue-80: #5ba6d8;
  --blue-60: #84bce2;
  --blue-40: #add3eb;
  --blue-20: #d6e9f5;
  --orange: #f16529;
  --black: #000000;
  --white: #ffffff;

  /* Secondary */
  --green: #009345;
  --yellow: #f9ec31;

  /* Neutrals: Black 10% + a cool light grey base */
  --grey-10: #e6e6e6;
  --grey-cool: #f3f6f9;
  --ink: #1a1d21;
  --body: #2b3036;
  --muted: #6b747d;
  --line: #e1e7ed;

  /* Darker steps for text contrast only (never as a plane colour) */
  --blue-ink: #1f6fa6;
  --orange-ink: #c94a14;

  /* Type */
  --font: 'Inter', Arial, Helvetica, sans-serif;
  --fs-kicker: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(2rem, 4.5vw, 3.25rem);
  --fs-h1: clamp(2.75rem, 7.5vw, 5.5rem);

  /* Shape & rhythm */
  --radius: 10px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
  --rule-w: 56px;
  --rule-h: 6px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}