/* Grapevine design tokens — source of truth for the grapevine-site theme.
   Names follow grapevine-2026's --gvl-* convention so the marketing site and
   the LMS skin can share values. Mirror these in theme.json. */
:root {
  /* Inks */
  --gvl-primary: #94309f;        /* grape: buttons, progress, links */
  --gvl-primary-dark: #7b1e86;   /* grape as text on paper (AA) */
  --gvl-primary-light: #f9e5fb;  /* grape tint: feedback boxes, text on grape */
  --gvl-vine: #3fa34d;           /* second ink: offset shadows, leaf */
  --gvl-gold: #f2a20c;           /* "where you are now" — never decoration */

  /* The overprinted word.
   *
   * The same ink as the brand. It is kept as a token of its own because the
   * two have been apart once already — the highlight moved to hue 294 before
   * the buttons followed — and the next time one needs to move without the
   * other, this is the seam that lets it. */
  --gvl-highlight: var(--gvl-primary);
  --gvl-gold-wash: #fff8e8;      /* current-item background */
  --gvl-success: #2f7a3a;        /* completion ticks; fixed whatever the brand colour */
  --gvl-success-wash: #e3f2e5;

  /* Paper */
  --gvl-paper: #f3eee3;
  --gvl-paper-2: #ebe4d4;
  --gvl-card: #fbf8f1;
  --gvl-night: #17151b;          /* footer */

  /* Ink (text and lines) */
  --gvl-ink: #1f1b24;
  --gvl-ink-2: #514a59;
  --gvl-ink-on-night: #bdb5c4;
  --gvl-line: rgba(31, 27, 36, .14);
  --gvl-line-2: rgba(31, 27, 36, .85);

  /* Print devices */
  --gvl-border: 2px solid var(--gvl-ink);
  --gvl-shadow: 5px 5px 0 var(--gvl-ink);
  --gvl-shadow-vine: 4px 4px 0 var(--gvl-vine);
  --gvl-shadow-gold: 3px 3px 0 var(--gvl-gold);
  --gvl-dots: radial-gradient(rgba(148, 48, 159, .22) 1.2px, transparent 1.4px);
  --gvl-dots-size: 11px 11px;

  /* Shape */
  --gvl-radius-sm: 8px;
  --gvl-radius: 14px;
  --gvl-radius-lg: 20px;
  --gvl-pill: 99px;
  /* The height of a small control in the header. The hamburger and the
     primary button sit side by side there and are the only two things in the
     bar, so they share a number rather than each carrying their own. */
  --gvl-control: 40px;

  /* Type */
  --gvl-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --gvl-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gvl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gvl-h1: clamp(52px, 7vw, 92px);       /* weight 800, tracking -.045em, line-height .95 */
  --gvl-h2: clamp(38px, 4.6vw, 58px);     /* weight 800, tracking -.04em, line-height 1 */
  --gvl-h3: 30px;                          /* group headings */
  --gvl-body: 17px;
  --gvl-kicker: 12.5px;                    /* mono, uppercase, tracking .14em */

  /* Layout */
  --gvl-container: 1240px;
  --gvl-gutter: 24px;
  --gvl-section-y: 100px;
}