/* ============================================================================
   ThisFirewall design tokens - canonical source for the marketing surface.
   Mirrors the product console (frontend/src/index.css) so the site and the app
   are one brand: one red (#EE3124), one type system (Lato + JetBrains Mono).
   Loaded by every marketing page; the fonts come from here so a page can never
   drift onto a different typeface again. Full spec: docs/brand/DESIGN_SYSTEM.md
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* --- Primitive: ink / neutral ramp --- */
  --tf-ink-950:#0F1115; --tf-ink-900:#14171D; --tf-ink-800:#1D222B; --tf-ink-700:#2E3742;
  --tf-ink-600:#495160; --tf-ink-500:#6B7480; --tf-ink-400:#8A93A4; --tf-ink-300:#AEB6C2;
  --tf-ink-200:#D0D5DB; --tf-ink-100:#E5E8EC; --tf-ink-50:#F2F4F7;
  /* --- Primitive: signal red (rationed accent) --- */
  --tf-red-700:#B11D14; --tf-red-600:#CC2218; --tf-red-500:#EE3124; --tf-red-400:#F46A5C; --tf-red-300:#F89A90;
  /* --- Primitive: semantic hues --- */
  --tf-green:#1F7A4D; --tf-amber:#B7791F; --tf-blue:#1976D2; --tf-danger:#D23B2E; --tf-teal:#0E8C7A;

  /* --- Brand aliases (what the pages consume) --- */
  --tf-brand:var(--tf-red-500);
  --tf-brand-strong:var(--tf-red-600);
  --tf-brand-dim:rgba(238,49,36,.07);

  /* --- Type --- */
  --tf-sans:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
  --tf-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}