/* ============================================================
   posto — design tokens
   Clean, technical light-mode system. Hairline borders,
   monospace micro-labels, single blue accent + violet for agent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;450;500;600;700&family=Geist+Mono:wght@400;450;500;600&display=swap');

:root {
  /* ---- Neutral scale (cool, near-neutral) ---- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f8f8fa;
  --gray-100: #f1f1f4;
  --gray-150: #eaeaee;
  --gray-200: #e4e4e9;
  --gray-300: #d6d6dd;
  --gray-400: #a8a8b3;
  --gray-500: #74747f;
  --gray-600: #56565f;
  --gray-700: #3e3e46;
  --gray-800: #292930;
  --gray-900: #18181c;
  --gray-950: #0b0b0e;

  /* ---- Accent: blue (primary) ---- */
  --blue-50:  #eef1ff;
  --blue-100: #dde3ff;
  --blue-200: #c2ccff;
  --blue-300: #9aabff;
  --blue-400: #6b81ff;
  --blue-500: #3b5bff;  /* primary */
  --blue-600: #2f49e0;
  --blue-700: #2639b0;

  /* ---- Secondary accent: violet (AI / agent) ---- */
  --violet-50:  #f2effe;
  --violet-100: #e7e0fe;
  --violet-300: #b9a6fb;
  --violet-500: #7c52f5;
  --violet-600: #6a3fe0;

  /* ---- Semantic status ---- */
  --green-50:  #e9f8f0;
  --green-500: #14a05c;
  --green-600: #0d8049;
  --amber-50:  #fdf3e3;
  --amber-500: #d9870a;
  --amber-600: #b56e05;
  --red-50:    #fdeceb;
  --red-500:   #e0473a;
  --red-600:   #c2362b;

  /* ---- Semantic roles ---- */
  --bg:           var(--gray-0);
  --bg-subtle:    var(--gray-50);
  --bg-sunken:    var(--gray-100);
  --surface:      var(--gray-0);
  --surface-2:    var(--gray-25);
  --border:       #e9e9ee;
  --border-strong:#dcdce3;
  --border-hair:  #f0f0f3;

  --text:         var(--gray-900);
  --text-2:       var(--gray-600);
  --text-3:       var(--gray-500);
  --text-faint:   var(--gray-400);
  --accent:       var(--blue-500);
  --accent-text:  var(--blue-600);

  /* ---- Type ---- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;

  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    17px;
  --fs-xl:    20px;
  --fs-2xl:   25px;
  --fs-3xl:   32px;
  --fs-4xl:   42px;

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---- Shadows (subtle, technical) ---- */
  --sh-xs: 0 1px 2px rgba(16,18,28,0.04);
  --sh-sm: 0 1px 2px rgba(16,18,28,0.05), 0 1px 1px rgba(16,18,28,0.03);
  --sh-md: 0 4px 12px -2px rgba(16,18,28,0.08), 0 2px 4px -2px rgba(16,18,28,0.05);
  --sh-lg: 0 12px 32px -8px rgba(16,18,28,0.14), 0 4px 10px -4px rgba(16,18,28,0.06);
  --sh-pop: 0 8px 28px -6px rgba(16,18,28,0.18);

  /* ---- Spacing base unit = 4px ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  --ring: 0 0 0 3px rgba(59,91,255,0.18);
  --ring-error: 0 0 0 3px rgba(224,71,58,0.13);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
}

::selection { background: var(--blue-100); }