/* tokens.css — the single source of brand design tokens + base reset.
   Brand: cream/teal only, Lora + Outfit, square corners, 1px hairlines.
   Every page loads this first; component styles consume the variables. */
:root {
  --cream: #f4efe4;
  --paper: #efe8da;
  --teal: #006869;
  --teal-deep: #00504f;
  --ink: #211f1b;
  --muted: #8c8475;
  --line: #d9cfbb;
  --line-strong: #c3b9a2;
  --flag: #a8572b; /* alert / stalled state / Life area */
  --danger: #a3402f; /* destructive / error state (delete, key-in-use, validation) */

  --font-sans: 'Outfit', sans-serif;
  --font-serif: 'Lora', serif;

  /* Shared content column — the single source of truth for the horizontal
     box that the sticky header AND every module body must track. The header
     chrome (.cc-bar/.cc-crumbs) and each page wrapper consume these so their
     left/right gutters line up site-wide. Change the width/gutter here only. */
  --app-content-max: 1180px;
  --app-gutter: 44px;
}

/* Shared layout primitive: any page content wrapper using this matches the
   header's content column exactly. Vertical padding stays per-module. */
.app-container {
  max-width: var(--app-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}

* {
  box-sizing: border-box;
}

html {
  /* Always reserve the vertical scrollbar's space so centered layouts (.wrap /
     .ni-wrap, margin:0 auto) don't shift left/right between tall pages that
     scroll (e.g. the Network "People" tab) and short ones that don't. Keeps the
     left/right gutter identical across every page and tab. */
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}