/* Tesselos design tokens — the same semantic set the platform shell would use.
   A brand (agency / house brand) overrides only the accent block + logo/name;
   neutrals, status colours, spacing and type stay fixed. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");

/* Registered so a brand switch tweens the accent instead of snapping. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #3246e6; }
@property --accent-soft { syntax: "<color>"; inherits: true; initial-value: #e8ebfd; }
@property --accent-text { syntax: "<color>"; inherits: true; initial-value: #2a3bd0; }

:root, [data-skin] { transition: --accent .5s ease, --accent-soft .5s ease, --accent-text .5s ease; }

:root {
  --paper: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --line: #e4e1da;
  --line-strong: #d3cfc6;
  --ink: #14161a;
  --ink-2: #3a3d44;
  --muted: #62656d;

  --good: #1f8a5b;  --good-soft: #e3f3ea;
  --warn: #b26a00;  --warn-soft: #fbf0dc;
  --bad: #c23b2e;   --bad-soft: #fae6e3;
  --info: #2f6fd1;  --info-soft: #e5eefb;

  /* Tessellation tile palette (marketing art + module colour-coding) */
  --tile-1: #3246e6;
  --tile-2: #f2b33d;
  --tile-3: #ef6a4c;
  --tile-4: #17a39b;
  --tile-5: #14161a;

  /* ── Brand block: the ONLY tokens a skin overrides ── */
  --accent: #3246e6;        /* Tesselos cobalt */
  --accent-ink: #ffffff;    /* text on accent (computed per skin) */
  --accent-soft: #e8ebfd;   /* tinted backgrounds */
  --accent-text: #2a3bd0;   /* accent used as text on paper (≥4.5:1) */

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.05);
  --shadow-2: 0 8px 28px -12px rgba(20, 22, 26, 0.18);

  --font-ui: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-display: "Instrument Serif", Georgia, serif;
}

/* Skins — what an agency's brand profile writes onto the shell root */
[data-skin="abs"] {
  --accent: #0f9488; --accent-ink: #ffffff; --accent-soft: #dff3f0; --accent-text: #0b7a70;
}
[data-skin="northwind"] {
  --accent: #c2410c; --accent-ink: #ffffff; --accent-soft: #fbe9df; --accent-text: #a8380a;
}

html { background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-weight: 500; font-size: 15px; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; text-decoration: none; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.btn-accent:hover { filter: brightness(0.94); }
.btn-ink { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-ink:hover { background: #2a2d33; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.pill-good { background: var(--good-soft); color: var(--good); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-accent { background: var(--accent-soft); color: var(--accent-text); }
.hair { border-color: var(--line); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }