/*!
 * Studio Light (S): Gully Chain design tokens. gully-labs/gully-ops sites/_shared/studio-light/tokens.css (spec: README.md).
 * Compact, minimal, corporate-modern on white. Inter 400-800 for everything (Exo 2 800 only in the GullyChain
 * wordmark), 14 px base, radii 8/10/12/14, one accent. Every class in components.css and every chart in charts.js
 * reads only these variables. data-product on <html> may swap the accent (chain is the default).
 */
:root {
  /* ---- surfaces ---- */
  --sl-bg: #FFFFFF;
  --sl-surface: #F6F7F9;
  --sl-surface-2: #F4F5F7;
  --sl-hover: #F1F2F4;
  --sl-border: #E6E8EC;
  --sl-border-strong: #D5D9E0;   /* secondary buttons, inputs */
  --sl-divider: #F0F1F4;         /* chart gridlines, list rules */
  --sl-night: #05080D;           /* mascot card ground (the kit art has a dark ground) */

  /* ---- text (all >= 4.5:1 on white) ---- */
  --sl-text: #0B0D12;
  --sl-text-2: #3D4350;
  --sl-muted: #5B6270;

  /* ---- accent + links ---- */
  --sl-accent: #0A86C2;          /* fills, chart series 1, focus ring; text only at >= 14px bold (4.3:1) */
  --sl-on-accent: #FFFFFF;
  --sl-accent-soft: #E6F4FB;
  --sl-link: #075F8C;            /* 7.0:1 */
  --sl-link-hover: #04456A;

  /* ---- semantic (text on tint) ---- */
  --sl-ok: #0B6640;     --sl-ok-bg: #E5F6EE;
  --sl-info: #075F8C;   --sl-info-bg: #E6F4FB;
  --sl-warn: #7A4A00;   --sl-warn-bg: #FFF4DE;
  --sl-danger: #B42318; --sl-danger-bg: #FDECEA;
  --sl-live: #E5484D;   /* the live dot */

  /* ---- chart series ---- */
  --sl-s1: var(--sl-accent);
  --sl-s2: #16A34A;
  --sl-s3: #6366F1;
  --sl-s4: #F59E0B;
  --sl-s5: #8C93A0;

  /* ---- type ---- */
  --sl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sl-font-brand: "Exo 2", "Inter", system-ui, sans-serif;  /* GullyChain wordmark only */
  --sl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sl-fs-xs: 11px; --sl-fs-sm: 12px; --sl-fs-md: 13px; --sl-fs: 14px; --sl-fs-lg: 16px; --sl-fs-xl: 17px;
  --sl-fs-h3: 16px; --sl-fs-h2: 22px; --sl-fs-h1: clamp(32px, 4.2vw, 52px);
  --sl-lh: 1.5;

  /* ---- shape, space, motion ---- */
  --sl-r-sm: 8px; --sl-r: 10px; --sl-r-md: 12px; --sl-r-lg: 14px; --sl-r-xl: 20px; --sl-r-pill: 999px;
  --sl-gutter: 16px; --sl-maxw: 1280px; --sl-header-h: 56px;
  --sl-shadow: 0 10px 24px rgba(11, 13, 18, .12);
  --sl-shadow-pop: 0 18px 48px rgba(11, 13, 18, .16), 0 0 0 1px rgba(11, 13, 18, .04);
  --sl-ease: cubic-bezier(.2, .8, .2, 1);
  --sl-dur: 160ms;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --sl-gutter: 32px; } }

/* Gully Studio surfaces keep the Studio blue, darkened to pass 4.5:1 as text on white */
[data-product="studio"] { --sl-accent: #1A6FD1; --sl-accent-soft: #E8F1FC; --sl-link: #155BB0; --sl-link-hover: #0F4485; }