/* Simplifiq design tokens. The only file in the site that may contain hex values. */

/* Metric-matched fallback so the swap to Inter causes no layout shift. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

:root {
  /* Core brand (matches proposals + capabilities page) */
  --ink: #0F1A20;          /* headlines, dark bands, nav */
  --ink-2: #43535B;        /* body copy */
  --muted: #7B8B93;        /* meta only, 18px+ or decorative (fails AA for small text) */
  --accent: #12B8CE;       /* accent line of headings, primary button bg, rules, ticks */
  --accent-hover: #11ADC2; /* primary hover, ~6% darker */
  --accent-deep: #0A6E80;  /* kickers, links, labels on white */
  --accent-wash: #E8F8FB;  /* chips, icon tiles, highlights */
  --surface: #FFFFFF;
  --surface-2: #F5F9FA;    /* alternating section band */
  --line: #E1EAEE;         /* card frames, hairline grid gutters */
  --line-soft: #EDF3F5;    /* dividers */
  --line-strong: #C9D6DB;  /* outline button border */

  /* Web extension: dark band */
  --ink-raised: #16252D;   /* cards on dark */
  --ink-line: #24353E;     /* borders on dark */
  --on-ink: #C9D6DB;       /* body text on dark */
  --on-ink-muted: #93A6AE;

  /* Status (UI mocks only) */
  --ok: #1F9D61;   --ok-bg: #E9F6EF;   --ok-fg: #17774A;
  --warn: #E08A1E; --warn-bg: #FCF1E2; --warn-fg: #9A5A0C;
  --bad: #C2413B;

  /* Type */
  --font: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --fs-display: clamp(44px, 6vw, 80px);   /* 800, lh 1.0, ls -0.035em */
  --fs-h2: clamp(30px, 3.8vw, 48px);      /* 800, lh 1.08, ls -0.03em */
  --fs-h3: 22px;                          /* 700, ls -0.01em */
  --fs-lead: 20px;                        /* 400, lh 1.6, color ink-2 */
  --fs-body: 17px;                        /* 400, lh 1.65, max 68ch */
  --fs-small: 15px;
  --fs-kicker: 12px;                      /* 800, ls 0.16em, uppercase, accent-deep */
  --fs-stat: 38px;                        /* 800, ls -0.03em, accent, tabular-nums */

  /* Spacing, 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;
  --section-y: 112px;      /* 72px under 720px */
  --container: 1200px;
  --gutter: 32px;          /* 20px under 720px */
  --card-pad: 36px;

  /* Radius */
  --r-chip: 6px; --r-btn: 10px; --r-tile: 12px; --r-card: 14px; --r-panel: 22px; --r-pill: 999px;

  /* Elevation */
  --shadow-raised: 0 1px 2px rgba(15,26,32,.06), 0 8px 24px rgba(15,26,32,.06);
  --shadow-float: 0 24px 64px rgba(15,26,32,.12);
  --scrim: rgba(15,26,32,.62);  /* dialog backdrop */

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --t-hover: 200ms;
  --t-reveal: 600ms;
}

@media (max-width: 720px) {
  :root {
    --section-y: 72px;
    --gutter: 20px;
    --card-pad: 28px;
  }
}