/* ============================================================
   Project Synk — shared design system (single source of truth)
   Loaded LAST in every page's <head> so these canonical tokens
   win over each page's own styles. Edit values here to restyle
   the whole site at once.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces (all legacy aliases mapped to the canonical dark base) */
  --bg:#04060b;          --background:#04060b;
  --bg-2:#0b1019;        --bg-3:#111827;        --bg-4:#17213a;
  --card:#0e1421;        --card-2:#121a2b;
  --panel:#0e1421;       --panel2:#121a2b;      --panel3:#17213a;
  --border:#1a2238;      --border-2:#2a3550;    --border-strong:#263048;
  --border-subtle:#121828; --line:#1a2238;

  /* accents — vibrant multi-hue */
  --accent:#6b7cff;      --accent-edge:#4f5fcc; --accent-2:#4dd0ff;
  --accent-light:rgba(107,124,255,.12);
  --violet:#a78bfa;      --teal:#2dd4bf;        --amber:#f6b73c;
  --rose:#fb7185;        --sky:#38bdf8;

  /* semantic */
  --success:#34d399;     --success-light:rgba(52,211,153,.12);
  --warning:#fbbf24;     --warning-light:rgba(251,191,36,.12);
  --danger:#f87171;      --danger-light:rgba(248,113,113,.12);

  /* text */
  --text:#eef2f9;        --text-dim:#9aa6bd;
  --text-muted:#566074;  --text-mute:#566074;   --muted:#9aa6bd;

  /* type + shape */
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:16px;         --radius-sm:10px;
}

html,body{ background:#04060b; color:var(--text); }
body{ font-family:var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,.logo,.brand{ font-family:var(--display); letter-spacing:-.02em; }
code,pre,kbd,.mono{ font-family:var(--mono); }
a{ color:inherit; }
::selection{ background:rgba(107,124,255,.28); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:#1f2840; border-radius:8px; border:2px solid #04060b; }
::-webkit-scrollbar-track{ background:#04060b; }

/* ============================================================
   Brand logo lockup — gradient ring symbol + recoloured wordmark.
   Scoped to the logo containers ONLY (.logo / .brand-logo / .blogo)
   so the shared .mark / .nm / .pre classes used by dashboard data
   rows are never affected.
   ============================================================ */
.logo .logo-sym, .brand-logo .logo-sym, .blogo .logo-sym{
  width:30px; height:30px; display:block; flex:none;
}
.blogo .logo-sym{ width:28px; height:28px; }  /* matches local 28px mark scale */
/* white PROJECT */
.logo .wm .pre, .blogo .wm .pre, .brand-logo .bl-wm .bl-pre{ color:#fff; }
/* gradient synk — matches the ring's green→blue */
.logo .wm .nm, .blogo .wm .nm, .brand-logo .bl-wm .bl-nm{
  background:linear-gradient(90deg,#00ff8f,#00a1ff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}