/* ============================================================
   Outreacher — Design Tokens
   ============================================================ */

:root {
  --accent:        #6B4DF6;
  --accent-press:  #5638e0;
  --accent-soft:   color-mix(in oklab, var(--accent) 12%, white);
  --accent-soft-2: color-mix(in oklab, var(--accent) 6%, white);
  --on-accent:     #ffffff;

  --ink-950: #0b0c10;
  --ink-900: #141519;
  --ink-800: #1d1f25;
  --ink-700: #2a2d35;
  --ink-600: #3b3f49;
  --ink-500: #5b606c;
  --ink-400: #868c99;
  --ink-300: #aab0bc;
  --ink-200: #d2d6de;
  --ink-150: #e2e5ea;
  --ink-100: #eef0f3;
  --ink-50:  #f6f7f9;
  --ink-25:  #fbfbfc;
  --white:   #ffffff;

  --pos:      #1f9d57;
  --pos-soft: color-mix(in oklab, var(--pos) 12%, white);
  --warn:     #c98a09;
  --warn-soft: color-mix(in oklab, var(--warn) 14%, white);
  --neg:      #d8443c;
  --neg-soft: color-mix(in oklab, var(--neg) 12%, white);
  --info:     #2b7fff;

  --bg:        var(--ink-50);
  --surface:   var(--white);
  --surface-2: var(--ink-50);
  --surface-3: var(--ink-100);
  --line:      var(--ink-150);
  --line-soft: var(--ink-100);
  --text:      var(--ink-900);
  --text-2:    var(--ink-500);
  --text-3:    var(--ink-400);
  --primary:   var(--ink-900);
  --primary-press: var(--ink-700);
  --on-primary: var(--white);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --d: 1;
  --row-h: calc(52px * var(--d));
  --pad: calc(16px * var(--d));
  --gap: calc(12px * var(--d));

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(13,15,20,.06), 0 1px 3px rgba(13,15,20,.04);
  --sh-md: 0 2px 6px rgba(13,15,20,.06), 0 8px 24px rgba(13,15,20,.07);
  --sh-lg: 0 8px 16px rgba(13,15,20,.08), 0 24px 56px rgba(13,15,20,.14);
  --sh-pop: 0 12px 32px rgba(13,15,20,.18), 0 2px 6px rgba(13,15,20,.10);

  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
}

[data-theme="dark"] {
  --accent-soft:   color-mix(in oklab, var(--accent) 26%, var(--ink-900));
  --accent-soft-2: color-mix(in oklab, var(--accent) 16%, var(--ink-950));
  --pos-soft:  color-mix(in oklab, var(--pos) 24%, var(--ink-900));
  --warn-soft: color-mix(in oklab, var(--warn) 26%, var(--ink-900));
  --neg-soft:  color-mix(in oklab, var(--neg) 24%, var(--ink-900));
  --bg:        var(--ink-950);
  --surface:   var(--ink-900);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-700);
  --line:      #262931;
  --line-soft: #1e2026;
  --text:      #eef0f3;
  --text-2:    #9aa1ae;
  --text-3:    #6b7280;
  --primary:   var(--white);
  --primary-press: var(--ink-150);
  --on-primary: var(--ink-950);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 2px 8px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  --sh-lg: 0 12px 28px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.6);
  --sh-pop: 0 14px 36px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5);
}

[data-density="compact"] { --d: .82; }
[data-density="regular"] { --d: 1; }
[data-density="comfy"]   { --d: 1.16; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--text-3) 45%, transparent);
  border-radius: 99px; border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--text-3) 70%, transparent);
  background-clip: padding-box;
}