/* Design tokens — values from the SNF Brand Blueprint (Red Kite Design, 2026). */

:root {
  /* Primary palette */
  --heavy-metal: #2a352e;
  --heathered-gray: #bbb89d;
  --stack: #8d8e8d;
  --alto: #d7d7d7;
  --concrete: #f2f2f2;
  --white: #ffffff;

  /* Derived tones (tints of the palette, used for hover states and patterns) */
  --heavy-metal-lift: #34423a;
  --heathered-gray-deep: #a9a68a;

  /* Text */
  --ink: var(--heavy-metal);
  --ink-soft: rgba(42, 53, 46, 0.78);
  --ink-inverse: var(--concrete);
  --ink-inverse-soft: rgba(242, 242, 242, 0.76);
  --rule: rgba(42, 53, 46, 0.14);
  --rule-inverse: rgba(242, 242, 242, 0.16);

  /* Typography */
  --font-display: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --font-highlight: "Crimson Pro", Georgia, serif;
  --font-body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  --text-display: clamp(2.75rem, 1.4rem + 3.5vw, 4.75rem);
  --text-h2: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.75rem;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(84px, 10vw, 150px);
  --header-h: 84px;
  --radius: 18px;
  --grid-cell: 88px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The canister device: the shape at the centre of the mark (Brand Blueprint p.9) */
  --canister: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M40.5 5.5L5.5 40.5A38.2 27 45 0 0 59.5 94.5L94.5 59.5A38.2 27 45 0 0 40.5 5.5Z'/%3E%3C/svg%3E");
}