/* Scale — design tokens
   World: the founding-team deck, extended to a product UI.
   Warm near-white canvas, white sheets on hairline rules, charcoal ink.
   One muted blue for selection, focus and "needs you". Primary buttons are ink. */

:root {
  color-scheme: light;

  /* Neutrals */
  --canvas: #FAFAF8;      /* app ground */
  --sheet: #FFFFFF;       /* lists, panels, documents */
  --shell: #F4F4F1;       /* sidebar, secondary panels */
  --wash: #F0F0EC;        /* hover on canvas and sheet */
  --wash-2: #E8E8E3;      /* pressed, selected neutral */
  --rule: #E6E6E1;        /* hairlines */
  --rule-2: #D5D5CF;      /* control borders, emphasised dividers */
  --ink: #171717;         /* text, primary buttons */
  --ink-2: #3D3E42;       /* dense secondary text */
  --muted: #65686E;       /* secondary text: 5.2:1 on canvas */
  --faint: #8D9096;       /* icons, disabled, large-only text */

  /* The one accent */
  --accent: #426DA9;
  --accent-hover: #385F96;
  --accent-ink: #2E5385;  /* accent text on tint: 6.9:1 */
  --tint: #EDF2F8;
  --tint-2: #DCE6F2;

  /* Semantic states */
  --positive: #2B714B;
  --positive-tint: #E6F1EA;
  --caution: #8F5B0E;
  --caution-tint: #FAF0DC;
  --critical: #AE3A2E;
  --critical-tint: #FBEAE7;
  --record: #D8392A;

  /* People avatars: desaturated, warm */
  --person-1: #E8E2D6;
  --person-2: #DDE5E0;
  --person-3: #E3E0EA;
  --person-4: #EADFD9;
  --person-5: #DCE3EB;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --fs-11: 0.71875rem;  /* 11.5 */
  --fs-12: 0.78125rem;  /* 12.5 */
  --fs-13: 0.8125rem;   /* 13   */
  --fs-14: 0.875rem;    /* 14   */
  --fs-15: 0.9375rem;   /* 15   */
  --fs-17: 1.0625rem;   /* 17   */
  --fs-20: 1.25rem;     /* 20   */
  --fs-24: 1.5rem;      /* 24   */
  --fs-28: 1.75rem;     /* 28   */
  --lh-tight: 1.25;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  /* Space: 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* Elevation: overlays only. Content sits flat on hairlines. */
  --shadow-lift: 0 1px 2px rgba(23, 23, 23, .05), 0 6px 16px -4px rgba(23, 23, 23, .10);
  --shadow-pop: 0 1px 2px rgba(23, 23, 23, .06), 0 12px 32px -8px rgba(23, 23, 23, .18);
  --shadow-dialog: 0 2px 6px rgba(23, 23, 23, .06), 0 28px 64px -16px rgba(23, 23, 23, .28);

  /* Motion: state changes only */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-slow: 320ms;
  --d-spine: 560ms;

  /* Layout */
  --sidebar-w: 248px;
  --rail-w: 320px;
  --content-max: 1120px;
  --reading-max: 720px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
    --d-spine: 0ms;
  }
}