/* QÜBE design tokens: the one source for colors, type, spacing and shape.
   Every page loads this before its own <style>; a page's :root only adds or
   overrides what is specific to it. Mirrors the QÜBE design system
   (https://claude.ai/artifact/9h3NSW1AcYWfgUT3dYDtf4). */
:root {
  color-scheme: light;

  /* core */
  --bg: #ffffff;
  --ink: #111216;
  --muted: #6b6f78;
  --faint: #f5f6f8;
  --line: #e4e6ea;
  --soft: #9a9ea8;
  --placeholder: #c4c7cd;

  /* the one accent; pages set it to the member's color where personal */
  --accent: #3a3df5;
  --accent-tint: #eeeefe;
  --accent-soft: #f0f0ff;
  --accent-hover: #f5f5ff;
  --me-1: #dfe0fd;

  /* signals */
  --danger: #c2261d;
  --like: #e0584a;
  --berry: #e33a6d;

  /* pApp materials */
  --warm: #f7f2ea;
  --paper: #f8f5ee;
  --wall: #f3eee6;
  --ocean: #fafbfc;
  --land: #e3e6ec;

  /* 2Do tags */
  --tag-blue: #2a78d6;
  --tag-orange: #eb6834;
  --tag-green: #1baf7a;
  --tag-yellow: #eda100;

  /* type */
  --font-display: "Unbounded", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --gutter: clamp(16px, 5vw, 64px);
  --content-max: 1180px;
  --measure: 40ch;
  --control-lg: 52px;
  --control-md: 44px;

  /* spacing */
  --space-1: 2px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 72px;
  --space-8: 120px;

  /* shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* depth: hairlines, not borders; shadows only on what floats */
  --shadow-hairline: inset 0 0 0 1px var(--line);
  --shadow-ink: inset 0 0 0 1px var(--ink);
  --shadow-float: inset 0 0 0 1px var(--line), 0 6px 24px rgba(17, 18, 22, 0.06);
  --shadow-panel: inset 0 0 0 1px var(--line), 0 2px 6px rgba(17, 18, 22, 0.04), 0 24px 56px rgba(17, 18, 22, 0.10);

  /* motion */
  --spring: cubic-bezier(.2, 1.4, .4, 1);
}