/* 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: #626b74;
  --line: #e1e7ed;

  /* Darker steps for text contrast only (never as a plane colour).
     Measured (WCAG): blue-ink 4.9:1 on blue-20 chips, orange-ink 4.9:1 on
     the private tag, muted 5.0:1 on grey-cool. */
  --blue-ink: #1d679b;
  --orange-ink: #ad3f0e;
  /* Backing for small white UI text on brand planes: white on it ≥ 4.7:1. */
  --plane-shade: rgba(0, 0, 0, 0.18);

  /* 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; }
}

/* Brand defaults use yellow display type on blue/orange planes (2.6–2.8:1).
   Visitors who ask their OS for more contrast get darker planes and white
   display type instead (all ≥ 4.7:1). */
@media (prefers-contrast: more) {
  :root { --blue: #236590; --orange: #b54c1f; --green: #006e34; --yellow: #ffffff; }
}