/* Volta Solutions — design tokens.
   Locked palette, type, spacing, and self-hosted IBM Plex.
   Nothing here is page-specific; treat this as the contract. */

:root {
  /* Palette */
  --color-bg:          #F6F4EE; /* warm off-white — page */
  --color-surface:     #FFFFFF; /* cards, header, footer */
  --color-ink:         #1C2430; /* primary text */
  --color-ink-muted:   #4A5563; /* secondary text */
  --color-accent:      #2F7D7A; /* muted teal — primary action */
  --color-accent-hover:#215B59;
  --color-roi:         #B87333; /* copper — ONLY for £/% payback numbers */
  --color-hairline:    #DDD8CD; /* borders, dividers */
  --color-success:     #2F6A3A; /* rare — verified-saving moments */

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-base: 1.0625rem;  /* 17 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  2rem;       /* 32 */
  --fs-3xl:  2.75rem;    /* 44 */
  --fs-4xl:  3.5rem;     /* 56 */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container-max: 72rem;  /* 1152px */
  --container-pad: 1.5rem;
  --radius: 4px;

  /* Motion */
  --transition: 180ms ease;
}

/* Self-hosted IBM Plex — Latin subset only, specific weights we actually use. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}