/* Suture brand tokens and base styles. Every screen loads this file. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

:root {
  /* brand */
  --violet: #6D3BFF;        /* Suture Violet: primary actions, the mark */
  --violet-ink: #FFFFFF;
  --lime: #C6FF3D;          /* Stitch Lime: tiny accents only (stitches, live dots, focus) */
  --ink-black: #0B0B10;     /* Ink: the darkest surface */

  /* surfaces (light) */
  --bg: #F5F4FA; --panel: #FFFFFF; --panel-2: #EEECF6; --ink: #121019; --muted: #66627A; --line: #E2DFEC;
  --accent: var(--violet); --accent-ink: var(--violet-ink); --chip: #EEECF6;

  /* edit states */
  --pending: #E9E2FF; --accepted: #DDF5E6; --rejected: #ECEBF0; --active: #6D3BFF;
  --ins: #0E8A43; --del: #D93036; --mine: #FFF3C4;

  /* type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-essay: "Source Serif 4", Georgia, "Times New Roman", serif;

  --radius: 12px; --radius-sm: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B10; --panel: #15141D; --panel-2: #1D1B28; --ink: #EEECF6; --muted: #9A95B2; --line: #282636;
    --accent: #8B66FF; --chip: #221F31;
    --pending: #2C2152; --accepted: #143A26; --rejected: #1E1D27; --active: #A98BFF;
    --ins: #3DD68C; --del: #FF6B6F; --mine: #4A3F12;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0B10; --panel: #15141D; --panel-2: #1D1B28; --ink: #EEECF6; --muted: #9A95B2; --line: #282636;
  --accent: #8B66FF; --chip: #221F31;
  --pending: #2C2152; --accepted: #143A26; --rejected: #1E1D27; --active: #A98BFF;
  --ins: #3DD68C; --del: #FF6B6F; --mine: #4A3F12;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
a { color: var(--accent); }
::selection { background: color-mix(in srgb, var(--violet) 30%, transparent); }

/* brand lockup */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand img { width: 28px; height: 28px; display: block; }
.brand .word { font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: 0; }
.brand .word i { font-style: normal; color: var(--accent); }

/* buttons and chips */
button { font: 500 13px/1 var(--font-ui); border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
button:hover { border-color: var(--muted); }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--chip); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; color: var(--ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); display: inline-block; }