/* HumanSpark brand tokens - portable subset for the sparkbench minisite.
 *
 * Source of truth: webby/theme/css/humanspark-tokens.css (commit 9862ed7).
 * This is a DE-COUPLED export: the theme file depends on Pico CSS + Open Props
 * (var(--size-*), var(--ease-*)); every such dependency is resolved to a
 * concrete value here so the standalone minisite can use it with no framework.
 *
 * Load this FIRST (before fonts.css, sparkbench-adopt.css, brand-shell.css).
 * Do not hardcode these hex values elsewhere - reference the variables, so a
 * re-export of the kit re-syncs the whole site.
 */
:root {
  /* Typography */
  --hs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Brand colours */
  --hs-white: #FFFFFF;
  --hs-navy: #00082A;          /* primary dark background (hero, brand bar) */
  --hs-navy-light: #103A65;    /* navy gradient end */
  --hs-teal: #008A8B;          /* LINK / ACCENT ONLY - never a background */
  --hs-link: var(--hs-teal);
  --hs-link-hover: #004D4E;
  --hs-accent: #C9A000;        /* gold - CTAs, card accents */
  --hs-accent-dark: #A88400;   /* gold hover */
  --hs-red: #F2295B;

  /* Text on light */
  --hs-text: #31312F;          /* body */
  --hs-text-heading: #111111;
  --hs-text-muted: #4A5568;
  --hs-text-faint: #94A3B8;

  /* Text on navy/dark */
  --hs-dark-text: rgba(255, 255, 255, 0.92);
  --hs-dark-text-muted: rgba(200, 215, 230, 0.65);
  --hs-dark-text-faint: rgba(200, 215, 230, 0.45);
  --hs-footer-text: #94A3B8;

  /* Surfaces / lines */
  --hs-bg-reading: #f7f9fb;    /* page reading background */
  --hs-grey: #F0F0F0;
  --hs-border-subtle: rgba(0, 0, 0, 0.08);
  --hs-overlay-medium: rgba(255, 255, 255, 0.08);  /* card on navy */
  --hs-overlay-strong: rgba(255, 255, 255, 0.10);
  --hs-accent-subtle: rgba(201, 160, 0, 0.18);

  /* Shape */
  --hs-radius: 9px;
  --hs-card-radius: 14px;
  --hs-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
  --hs-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Layout */
  --hs-content-width: 1000px;
  --hs-reading-width: 680px;

  /* Weights */
  --hs-weight-body: 400;
  --hs-weight-heading: 800;
  --hs-weight-logo: 800;
}