/* ============================================================
   tokens.css — Design tokens for gateways.joseconti.com
   All values concrete. Light mode here; dark in dark-mode.css.
   ============================================================ */
:root{
  /* ---- Brand blue ramp ---- */
  --blue-50:#eef3ff;  --blue-100:#dbe6ff; --blue-200:#bcd0ff;
  --blue-300:#90b0ff; --blue-400:#5b84f6; --blue-500:#3360e6;
  --blue-600:#1f4cd1; --blue-700:#1a3da8; --blue-800:#1b3683; --blue-900:#1a2f68;

  /* ---- Confirmation green / teal ---- */
  --teal-400:#1fb98a; --teal-500:#109b72; --teal-600:#0c7e5d; --teal-700:#0d6650;

  /* ---- Warm slate neutrals ---- */
  --slate-0:#ffffff;  --slate-25:#fbfcfe; --slate-50:#f5f7fb; --slate-100:#eef1f6;
  --slate-200:#e3e8ef; --slate-300:#cdd5e0; --slate-400:#9aa6ba; --slate-500:#697892;
  --slate-600:#4d5b73; --slate-700:#36425a; --slate-800:#1f2940; --slate-900:#111a2e; --slate-950:#0a1120;

  /* ---- Semantic (light) ---- */
  --bg:var(--slate-0);
  --bg-subtle:var(--slate-50);
  --bg-sunken:var(--slate-100);
  --surface:var(--slate-0);
  --surface-2:var(--slate-25);
  --border:var(--slate-200);
  --border-strong:var(--slate-300);
  --text:var(--slate-900);
  --text-muted:var(--slate-600);
  --text-subtle:var(--slate-500);
  --text-inverse:#ffffff;

  --primary:var(--blue-600);
  --primary-hover:var(--blue-700);
  --primary-soft:var(--blue-50);
  --primary-ring:rgba(31,76,209,.32);
  --on-primary:#ffffff;

  --accent:var(--teal-600);
  --accent-strong:var(--teal-700);
  --accent-soft:#e3f6ef;

  --code-bg:var(--slate-900);
  --code-text:#dbe3f1;
  --code-inline-bg:var(--slate-100);
  --code-inline-text:var(--slate-800);

  /* ---- Feedback ---- */
  --success:#0c7e5d; --warning:#b5740a; --error:#cc3340; --info:var(--blue-600);
  --warning-soft:#fff3e0;

  /* ---- Typography ---- */
  --font-display:'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:'SF Mono','Fira Code','Fira Mono', Menlo, Consolas, monospace;

  --t-xs:0.75rem;  --t-sm:0.875rem; --t-base:1rem;  --t-lg:1.125rem; --t-xl:1.25rem;
  --t-2xl:1.5rem;  --t-3xl:1.875rem; --t-4xl:2.375rem; --t-5xl:3.25rem; --t-6xl:4.25rem;

  --lh-tight:1.1; --lh-snug:1.3; --lh-normal:1.6;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---- Spacing (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- Radius ---- */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:9999px;

  /* ---- Shadows ---- */
  --sh-sm:0 1px 2px rgba(16,26,48,.06), 0 1px 1px rgba(16,26,48,.04);
  --sh-md:0 4px 12px rgba(16,26,48,.08), 0 2px 4px rgba(16,26,48,.04);
  --sh-lg:0 14px 32px rgba(16,26,48,.10), 0 4px 10px rgba(16,26,48,.05);
  --sh-xl:0 28px 60px rgba(16,26,48,.16);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.6,.2,1);
  --fast:140ms var(--ease);
  --normal:240ms var(--ease);
  --slow:360ms var(--ease);

  /* ---- Layout ---- */
  --maxw:1180px;
  --maxw-prose:760px;
  --header-h:68px;
}