/* ============================================================
   FIRMA AI: DESIGN TOKENS
   v0.1 · derived from "Firma AI product Teaser.pdf"
   Import this first; every component should reference variables,
   never literal hex values.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- Brand ---- */
  --firma-teal:        #21707D;
  --firma-teal-deep:   #18525D;
  --firma-teal-dark:   #0F3B44;
  --firma-teal-tint:   #E5F0F1;
  --firma-teal-tint-2: #F0F7F8;

  /* ---- Neutrals ---- */
  --ink:          #0B0D0E;
  --ink-body:     #3A3F42;
  --ink-muted:    #737373;
  --line:         #D8D8D8;
  --line-soft:    #ECEEEF;
  --surface:      #FFFFFF;
  --surface-alt:  #F8FAFC;
  --surface-grey: #F2F2F2;
  --navy-render:  #020E28;

  /* ---- Status (enforcement decisions only) ---- */
  --allow: #15803D;  --allow-bg: #DCFCE7;
  --deny:  #991B1B;  --deny-bg:  #FEE2E2;
  --hitl:  #B45309;  --hitl-bg:  #FEF3C7;
  --live:  #1CB481;

  /* ---- Type ---- */
  --font-sans: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --fs-display: clamp(40px, 5.4vw, 68px);
  --fs-h1:      clamp(34px, 4.2vw, 52px);
  --fs-h2:      clamp(28px, 3.2vw, 40px);
  --fs-h3:      24px;
  --fs-h4:      19px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-mono:    14px;

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.65;
  --ls-tight: -0.02em;
  --ls-wide:   0.08em;

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

  /* ---- Radius ---- */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ---- Elevation ---- */
  --sh-1: 0 1px 2px rgba(11,13,14,.06), 0 2px 8px rgba(11,13,14,.04);
  --sh-2: 0 4px 12px rgba(11,13,14,.07), 0 12px 32px rgba(11,13,14,.06);
  --sh-3: 0 12px 32px rgba(11,13,14,.10), 0 32px 64px rgba(11,13,14,.08);

  /* ---- Layout ---- */
  --maxw: 1180px;
  --gutter: var(--s5);
  --section-y: var(--s9);          /* 96px desktop */
  --measure-body: 68ch;
  --measure-lead: 60ch;
}

@media (max-width: 900px){
  :root{ --section-y: var(--s8); }  /* 64px */
}
@media (max-width: 600px){
  :root{ --section-y: var(--s7); }  /* 48px */
}