/* Design tokens, shared by the site and by the extension panel.
 *
 * The selector is `:root, :host` on purpose. Inside the extension's shadow
 * root `:root` matches nothing, so every var() would resolve to nothing and
 * the panel would render unstyled. `:host` matches the shadow host and is
 * inert in the light DOM, so one file serves both without duplication.
 */
  :root,
:host {
    --blue: #1466d8;
    --blue-hover: #0f55b8;
    --blue-wash: #f4f8fe;
    --blue-line: #e3ecf9;

    --ink: #101519;
    --ink-2: #3d4a58;
    --muted: #5c6875;

    --surface: #fff;
    --surface-2: #f7f9fc;
    --line: #e3e8ef;
    --line-2: #e8edf4;
    --track: #eef1f5;
    --field-line: #cfdcee;

    --green: #0f6b48;
    --green-pill: #e4f3ec;

    --amber: #8a5a17;
    --amber-pill: #f4e9d6;

    --navy: #0f1d33;
    --navy-line: #2b3d5b;
    --navy-ink: #b6c4d6;
    --navy-muted: #9aa9bd;

    --shadow-sm: 0 1px 2px rgba(16, 21, 25, .05);
    --shadow-lg: 0 18px 40px -18px rgba(16, 33, 60, .28);

    --pad: 40px;
    --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }