/* ==========================================================================
   DESIGN TOKENS -- Arc Growth (clean SaaS direction, v2).

   Reset from the earlier forest/copper palette to a webforger-style clean
   look at the user's request: white-dominant surfaces, a single indigo
   primary + coral secondary reserved for buttons/small accents only, cool
   navy ink, hairline borders, and soft shadows doing the layering (NOT big
   colour blocks). Neutral sans throughout: Satoshi display + Inter body.
   ========================================================================== */

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour: white-dominant. Surfaces are white or a 2% cool tint; colour
     lives only in buttons, hairline borders, small accents and soft shadows. */
  --ink: #25282f;          /* cool navy near-black -- body text */
  --ink-deep: #171920;
  --surface: #ffffff;
  --surface-alt: #f4f5f7;  /* ~2% cool tint: section alternation, never a block */
  --surface-card: #ffffff;
  --accent: #0e68de;       /* indigo -- primary CTA */
  --accent-light: #4f8eff;
  --accent-dark: #00479f;  /* darker indigo for accent TEXT on white (AA) */
  --on-accent: #ffffff;
  --secondary: #ccc2df;    /* coral -- secondary accent (small use only) */
  --secondary-dark: #625b73;
  --line: rgba(37, 40, 47, 0.12);         /* cool hairline border */
  --line-on-dark: rgba(250, 249, 255, 0.18);
  --muted: #666870;        /* cool grey supporting text */
  --on-dark-muted: #b4b5bf;

  /* ---- Soft shadows do the layering (the whole point of the clean look):
     white cards separated by depth, not by filled colour blocks. */
  --shadow-card: 0 7px 18px rgba(30, 45, 80, 0.07), 0 2px 5px rgba(14, 36, 64, 0.05);
  --shadow-card-hover: 0 20px 44px rgba(30, 45, 80, 0.12), 0 4px 10px rgba(14, 36, 64, 0.06);
  --shadow-accent: 0 12px 28px rgba(14, 104, 222, 0.24);

  /* ---- Shape: softer, webforger-ish radii. */
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --container: 1200px;
  --font-display: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}