/* ==========================================================================
   ASPECT MANAGEMENT SERVICES — "Contour & Current" design system v1.1
   File: tokens.css
   Source of truth: Aspect Website.pdf (design-system board, PDF pp. 1–6). These files are the
   stylesheet the PDF was rendered from, split by section; visual rules are unchanged.
   ========================================================================== */

/* ---------- Self-hosted fonts (prototype addition) ------------------------
   Same families the PDF was rendered with (Google Fonts), self-hosted for privacy and speed.
   SIL Open Font License 1.1 — licence texts in assets/fonts/. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("../assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2"); }

/* ---------- Tokens --------------------------------------------------------- */
:root {
  /* Grounds */
  --paper: #FAF8F3;
  --white: #FFFFFF;
  --mist: #EEF3EE;
  --sand: #F3EEE4;
  --line: #E3DED3;
  --line-2: #CFC8BA;

  /* Ink */
  --ink: #13222D;
  --ink-2: #34434E;
  --muted: #5B6870;

  /* Brand — sampled from the logo */
  --blue: #1070B0;        /* wordmark */
  --blue-ink: #0C5B90;    /* text-safe blue */
  --blue-deep: #093A5B;
  --azure: #20A0D8;       /* logo wave */
  --blue-tint: #E7F0F7;
  --green: #00A050;       /* logo triangle */
  --green-ink: #00773C;   /* text-safe green */
  --green-tint: #E3F1E7;
  --leaf: #5DB848;        /* triangle highlight */
  --orange: #F06820;      /* logo arrow + rule */
  --orange-ink: #B54A0F;  /* text-safe orange */
  --orange-tint: #FCEADB;
  --action: #C2510F;      /* primary action fill, 4.7:1 with white */
  --action-hover: #A3430B;
  --danger: #B3261E;

  /* Deep plane — technology & AI storytelling */
  --deep: #0B2433;
  --deep-2: #11344A;
  --deep-line: #25485D;
  --on-deep: #EEF3F5;
  --on-deep-2: #B4C6D0;
  --on-deep-green: #7FD3A0;
  --on-deep-blue: #7CC4EE;
  --on-deep-orange: #FFB284;

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

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

  /* Shape — organic */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;
  --r-leaf: clamp(64px, 11vw, 168px) 24px clamp(64px, 11vw, 168px) 24px;
  --r-soft: 28px 28px 28px clamp(56px, 8vw, 120px);
  --r-soft-r: 28px 28px clamp(56px, 8vw, 120px) 28px;

  /* Depth */
  --shadow-1: 0 1px 2px rgba(19, 34, 45, .05), 0 14px 34px -20px rgba(19, 34, 45, .24);
  --shadow-2: 0 30px 70px -34px rgba(9, 36, 51, .45);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
}