/*
 * Personal CRM design tokens. The one file shared with production: crm/static/tokens.css is a
 * byte-identical copy, written in the same act as this one. Never edit one without the other.
 *
 * Direction: "Órbita", chosen by Gabriel on 2026-10-09 (replacing "Rede", which read as a
 *   generic AI dashboard). Your groups orbit around you; the page is about organizing people,
 *   their notes and their contacts, not about when to contact them. Fog-gray ground, white
 *   surfaces, one deep-teal accent, Sora for display, Manrope for text.
 *
 * Reference products: me.sh (Mesh): a plain list of all your contacts and who they are linked to.
 *
 * Forbidden (assumed by the wireframe skill, Gabriel delegated the call; modals allowed
 * at his request, 2026-10-09):
 *   - a second accent color; color is the accent, the semantic trio, and neutrals, nothing else
 *   - emoji or unicode glyphs as icons; one SVG sprite, 1.75 stroke, rounded caps
 *   - gradients, glassmorphism, drop-shadow stacks on cards
 *   - stock photos, illustrations, mascots; avatars are initials only
 *   - charts, streaks, gamified "relationship scores"; group size is the only thing drawn to scale
 *   - nested modals: a modal never opens another; edit and notes swap the one modal's content
 *   - font CDNs; Sora, Manrope and IBM Plex Mono (all OFL) are self-hosted
 */
:root {
  /* color: neutrals */
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #e6ebf1;
  --border: #dbe1ea;
  --border-strong: #c5cfdc;
  --text: #0e1726;
  --text-muted: #586377;
  --text-subtle: #8a94a6;

  /* color: the one accent */
  --accent: #0b6f6a;
  --accent-hover: #08524e;
  --accent-soft: #d9eeec;
  --on-accent: #ffffff;

  /* color: semantic trio (foreground, soft background, border) */
  --success: #1f7a4d;
  --success-soft: #e6f4ec;
  --success-border: #b7dfc8;
  --warning: #9a3412;
  --warning-soft: #fcebe3;
  --warning-border: #e0b9a6;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --danger-border: #f4c2bd;

  /* color: avatars (initials only) */
  --avatar-bg: #ffffff;
  --avatar-text: #0e1726;

  /* type */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.06em;

  /* spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* sizing */
  --control-h: 44px;
  --touch-min: 44px;
  --avatar-sm: 28px;
  --avatar-md: 44px;
  --avatar-lg: 64px;

  /* radii: a type, not a constant */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-avatar: 50%;

  /* elevation: hairline rings for low, shadow alone for high */
  --shadow-sm: 0 1px 2px 0 rgb(14 23 38 / 0.06);
  --shadow-md: 0 1px 2px 0 rgb(14 23 38 / 0.08), 0 0 0 1.5px var(--border-strong);
  --shadow-lg: 0 18px 40px -12px rgb(14 23 38 / 0.28);

  /* focus */
  --focus-ring: 0 0 0 3px rgb(11 111 106 / 0.35);
}