/* ============================================================
   Shared base — Mosaic foundation + UXW × AI mode tokens
   ============================================================ */
@import url('../ds/colors_and_type.css');

:root {
  /* AI mode palette — derived from Mosaic tokens.
     Automate = teal, Augment = blue, Act alone = yellow.
     We use 50 for tints, 500 for marks, 800 for text on tint. */
  --auto-bg: var(--ut-teal-50);
  --auto-mark: var(--ut-teal-500);
  --auto-fg: var(--ut-teal-800);
  --auto-line: var(--ut-teal-700);

  --aug-bg: var(--ut-blue-35);
  --aug-mark: var(--ut-blue-500);
  --aug-fg: var(--ut-blue-800);
  --aug-line: var(--ut-blue-600);

  --alone-bg: var(--ut-yellow-100);
  --alone-mark: var(--ut-yellow-500);
  --alone-fg: var(--ut-yellow-800);
  --alone-line: var(--ut-yellow-700);

  /* Phase tints (subtle) */
  --phase-1: var(--ut-neutral-25);
  --phase-2: var(--ut-neutral-35);
  --phase-3: var(--ut-neutral-25);
  --phase-4: var(--ut-neutral-35);
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--fg-body-strong);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

/* Mode pill — used in every approach */
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  font: 600 11px/1.4 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mode-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 auto;
}
.mode-pill.is-automate { background: var(--auto-bg); color: var(--auto-fg); }
.mode-pill.is-automate .dot { background: var(--auto-line); }
.mode-pill.is-augment  { background: var(--aug-bg);  color: var(--aug-fg);  }
.mode-pill.is-augment  .dot { background: var(--aug-line); }
.mode-pill.is-alone    { background: var(--alone-bg);color: var(--alone-fg);}
.mode-pill.is-alone    .dot { background: var(--alone-line); }

/* Version chip — used to flag "v2 adds AI" */
.v-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: var(--ut-neutral-25);
  border: 1px solid var(--border-divider);
  color: var(--fg-body);
  font: 600 11px/1.4 var(--font-body);
  letter-spacing: 0.02em;
}

/* Custom focus ring — Mosaic */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}