/* ------------------------------------------------------------------
   nano · design tokens
   Single source of truth for the Minimal-template visual system.
   Import once in Layout.astro (or your root layout). Every component
   reads var(--*); do not redeclare these per-file.
   ------------------------------------------------------------------ */
:root {
  /* ---- Surfaces ------------------------------------------------ */
  --bg:        #f1f3f6;   /* page background (cool off-white) */
  --surface:   #ffffff;   /* card / drawer / modal surface */

  /* ---- Ink ----------------------------------------------------- */
  --ink:       #0a0e16;   /* primary text, primary button bg */
  --ink-2:     #2c333d;   /* secondary text, body copy */
  --ink-3:     #5d6772;   /* tertiary text, captions */
  --ink-4:     #97a0ab;   /* quaternary text, meta */

  /* ---- Lines --------------------------------------------------- */
  --line:      #e1e6ec;   /* hairline dividers */
  --line-2:    #cdd5df;   /* visible separator / outlined-button border */

  /* ---- Brand accent ------------------------------------------- */
  --blue:        #1c3a7a; /* deep navy — primary accent */
  --blue-hover:  #142a5a;
  --blue-tint:   #eef2fb; /* used in solutions / faq backgrounds */

  /* ---- Status -------------------------------------------------- */
  --good:        #2a7d50; /* success / "savings" copy */
  --good-tint:   #e8f3ed;
  --warm:        #c8870c;
  --warm-tint:   #fbf3e0;
  --danger:      #b54245;
  --danger-tint: #fbe9ea;
  --purple:      #7b3f9c;

  /* ---- Type ---------------------------------------------------- */
  --sans:      "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:      "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Radii --------------------------------------------------- */
  --r-1:       6px;       /* buttons, inputs, small cards */
  --r-2:       10px;      /* large cards, modals */

  /* ---- Container widths --------------------------------------- */
  --max:        1080px;   /* default content max-width */
  --max-narrow: 720px;    /* prose / centered hero */
  --max-wide:   1200px;   /* Solutions + Features pages use wider grids */

  /* ---- Motion -------------------------------------------------- */
  --dur:       180ms;
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------
   Base resets — keep these once, here.
   ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }