/* Gainsight Community 2026 design tokens.
 *
 * Source: Sergi Font's prototype, site/assets/shared-tokens.css, captured
 * 2026-10-29 (_design/sergi-library/, kept out of git). Values are copied,
 * not measured.
 *
 * Global stylesheet: it reaches every element on the page, the community's
 * own included. So this file declares custom properties on :root and nothing
 * else. No element rules, ever.
 *
 * Two layers:
 *   1. Sergi's palette, under his names with a --ds- prefix. His unprefixed
 *      names (--text, --line, --card-radius) would collide with the
 *      community's own --card-* family on :root.
 *   2. The semantic names the widgets in this repo read (--ds-color-text,
 *      --ds-radius-card, ...), each pointing at the palette.
 *
 * Every widget also carries the same values as var() fallbacks, so it renders
 * in the local preview, where this file isn't loaded. Change a value here and
 * in the fallbacks together.
 *
 * Type sizes and spacing are not tokens in Sergi's file; they are literal
 * values in each component's CSS, so they stay in the widgets.
 */

:root {
  /* ── 1. Palette (Sergi's names) ─────────────────────────────────────────── */

  --ds-blue: #146AFF;
  --ds-blue-dark: #0F55D6;
  --ds-blue-soft: #EAF1FF;
  /* Blue text and icons. The bright blue only passes AA as a fill. */
  --ds-blue-text: #0F55D6;

  --ds-green: #1CA97C;
  /* Green for text and small icons; --ds-green stays for fills. */
  --ds-green-text: #0F7A55;
  --ds-like-text: #C2296A;

  --ds-black: #0B0B0C;
  --ds-text: #333333;
  --ds-muted: #5F5F5F;
  --ds-faint: #6A6A6A;
  --ds-eyebrow: #6B6963;
  --ds-body: #212529;

  --ds-surface: #F6F4F3;
  --ds-surface-hover: #F1EEEC;
  --ds-surface-line: #EFEBE8;
  --ds-line: #E8E6E1;
  --ds-white: #FFFFFF;
  --ds-soft: #F0F2F7;
  --ds-navy: #0F2A44;

  /* Product colours */
  --ds-cs: #146AFF;
  --ds-cc: #E5387D;
  --ds-px: #F2803E;
  --ds-sj: #8A94A6;
  --ds-st: #4E5D78;
  --ds-at: #0E9384;

  /* One look for every white content card */
  --ds-card-line: #E6E2DC;
  --ds-card-line-hover: #D8D2CA;
  --ds-card-radius: 20px;
  --ds-card-shadow: 0 1px 2px rgba(20,30,50,.05), 0 6px 16px -10px rgba(20,30,50,.08);
  --ds-card-shadow-hover: 0 1px 2px rgba(20,30,50,.05), 0 20px 40px -26px rgba(20,40,80,.32);

  --ds-glass-bg: rgba(255,255,255,.72);
  --ds-glass-filter: saturate(1.8) blur(18px);

  --ds-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Set on <body> in the prototype, so every widget inherits it there. */
  --ds-letter-spacing: -.01em;

  /* ── 2. Semantic names the widgets read ─────────────────────────────────── */

  --ds-font-family: var(--ds-font);

  /* Titles and headings are #000 throughout Sergi's component CSS. */
  --ds-color-text: #000000;
  --ds-color-body: var(--ds-text);
  --ds-color-text-muted: var(--ds-muted);

  --ds-color-link: var(--ds-blue-text);
  --ds-color-primary: var(--ds-blue);
  --ds-color-primary-hover: var(--ds-blue-dark);
  --ds-color-primary-soft: var(--ds-blue-soft);
  --ds-color-success: var(--ds-green);
  --ds-color-success-text: var(--ds-green-text);

  /* White cards, and the warm grey panels that sit beside them */
  --ds-color-surface: var(--ds-white);
  --ds-color-surface-subtle: var(--ds-surface);
  --ds-color-surface-subtle-border: var(--ds-surface-line);
  --ds-color-border: var(--ds-card-line);
  --ds-color-border-hover: var(--ds-card-line-hover);

  --ds-radius-card: var(--ds-card-radius);
  --ds-shadow-card: var(--ds-card-shadow);
  --ds-shadow-card-hover: var(--ds-card-shadow-hover);

  /* The prototype's focus treatment on cards: a 3px ring of the bright blue */
  --ds-focus-shadow: 0 0 0 3px rgba(20,106,255,.35);
}