/**
 * Design tokens — Vanderbilt Law School China Microsite
 *
 * Every value here is lifted directly from the Figma source
 * (file GzmEwBLOezV771pXuu9GEr). Nothing in this file is invented.
 * Section stylesheets must consume these tokens, never raw hex.
 */

:root {
  /* ---------------------------------------------------------------
   * Colour
   * ------------------------------------------------------------- */
  --vu-cream: #f5f3ef;           /* page + nav background */
  --vu-ink: #1c1c1c;             /* body text, dark button fill */
  --vu-ink-rgb: 28, 28, 28;      /* for alpha composites */
  --vu-rule: rgba(28, 28, 28, 0.1);  /* hairlines, 1.5px in Figma */
  --vu-on-dark: #f5f3ef;         /* text on ink surfaces */

  /* Gold is the wordmark gradient + the footer "Give" pill */
  --vu-gold: #cfae70;           /* footer "Give" pill, "E:" label */

  /* ---------------------------------------------------------------
   * Type families
   * Both are open source and self-hosted from assets/fonts.
   * CJK fallbacks are appended so Simplified Chinese copy renders
   * Noto SC faces are self-hosted and split by unicode-range (fonts-sc.css).
   * ------------------------------------------------------------- */
  --vu-font-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --vu-font-serif: "Libre Caslon Text", "Noto Serif SC", "Songti SC",
    "SimSun", Georgia, serif;

  /* ---------------------------------------------------------------
   * Type scale — size / line-height / tracking
   * Figma tracking is px at a given size; expressed here as em so it
   * survives the responsive size changes.
   * ------------------------------------------------------------- */
  --vu-display-size: 52px;
  --vu-display-lh: 1.32;
  --vu-display-track: -0.03em;   /* -1.56px @ 52px */

  --vu-serif-lg-size: 28px;
  --vu-serif-lg-lh: 1.32;
  --vu-serif-lg-track: -0.01em;  /* -0.28px @ 28px */

  --vu-body-size: 16px;
  --vu-body-lh: 24px;
  --vu-body-track: -0.01em;      /* -0.16px @ 16px */

  --vu-button-size: 14px;
  --vu-button-track: -0.01em;    /* -0.14px @ 14px */

  /* ---------------------------------------------------------------
   * Space — the Figma layout uses a 4px-ish rhythm with these stops
   * ------------------------------------------------------------- */
  --vu-space-2: 8px;
  --vu-space-3: 12px;
  --vu-space-4: 16px;
  --vu-space-5: 20px;
  --vu-space-6: 22px;
  --vu-space-7: 25px;
  --vu-space-8: 32px;
  --vu-space-10: 40px;
  --vu-space-16: 64px;
  --vu-space-30: 120px;          /* section bottom padding, desktop */

  /* ---------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------- */
  --vu-container: 1360px;        /* 1440 canvas − 40px gutters */
  --vu-gutter: 40px;
  --vu-nav-height: 80px;
  --vu-radius-pill: 28px;
  --vu-rule-width: 1.5px;

  /* ---------------------------------------------------------------
   * Motion — respected only when the user allows it (see base.css)
   * ------------------------------------------------------------- */
  --vu-transition: 200ms ease;

  /* ---------------------------------------------------------------
   * Focus — WCAG 2.2 SC 2.4.11/2.4.13. 3:1 against both cream and ink.
   * ------------------------------------------------------------- */
  --vu-focus-width: 3px;
  --vu-focus-offset: 2px;
  --vu-focus-colour: #1c1c1c;
  --vu-focus-colour-on-dark: #f5f3ef;
}

/* Mobile (390px canvas in Figma) scales the display type and gutters down. */
@media (max-width: 767px) {
  :root {
    --vu-display-size: 32px;
    --vu-gutter: 20px;
    --vu-space-30: 64px;
    --vu-serif-lg-size: 22px;
  }
}