/* Rowmesh design tokens — extracted from rowmesh.com/_astro/blocks.CYzczBlX.css */

/* Self-hosted brand faces, so the app makes no external requests.
   Variable fonts: one file covers the whole weight range per family. */
@font-face{
  font-family:"Funnel Display";
  src:url("../fonts/funnel-display.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Funnel Sans";
  src:url("../fonts/funnel-sans.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist";
  src:url("../fonts/geist.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  --violet-50:#f6f5ff; --violet-100:#eceaff; --violet-200:#d9d3ff; --violet-300:#beb1ff;
  --violet-400:#9e83ff; --violet-500:#7b3cf6; --violet-600:#6b39d3; --violet-700:#562cad;
  --violet-800:#422088; --violet-900:#2f1565; --violet-950:#1d0a44;
  --neutral-0:#fff; --neutral-50:#fafafd; --neutral-100:#eceef8; --neutral-200:#e0e1e6;
  --neutral-300:#c9cad1; --neutral-400:#a7a7af; --neutral-500:#7f7f88; --neutral-600:#5f5f69;
  --neutral-700:#464651; --neutral-800:#2f2f3a; --neutral-900:#1c1c27; --neutral-950:#101019;
  --neutral-975:#0b0b12;
  --green-100:#dcfce7; --green-400:#4ade80; --green-600:#16a34a; --green-700:#15803d; --green-900:#14532d;
  --amber-100:#fef3c7; --amber-400:#fbbf24; --amber-600:#ca8a04; --amber-700:#b45309; --amber-950:#451a03;
  --red-100:#fee2e2; --red-400:#f87171; --red-600:#dc2626; --red-700:#b91c1c; --red-950:#450a0a;
  --blue-100:#dbeafe; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-950:#172554;
  --pink-400:#f472b6; --pink-600:#db2777; --orange-600:#ea580c; --black:#000;

  --family-display:"Funnel Display","Funnel Sans",system-ui,sans-serif;
  --family-sans:"Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --family-product:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --family-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* semantic — light */
  color-scheme:light;
  --bg:var(--neutral-0);
  --bg-sunken:var(--neutral-50);
  --surface:var(--neutral-0);
  --surface-raised:var(--neutral-0);
  --surface-hover:var(--neutral-50);
  --line:var(--neutral-200);
  --line-strong:var(--neutral-300);
  --ink:var(--neutral-950);
  --ink-muted:var(--neutral-600);
  --ink-faint:var(--neutral-500);
  --primary:var(--violet-500);
  --primary-hover:var(--violet-600);
  --primary-soft:var(--violet-100);
  --primary-text:var(--violet-700);
  --on-primary:var(--neutral-0);
  --link:var(--primary);
  --focus-ring:var(--violet-500);

  --radius-sm:6px; --radius:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:999px;
  --shadow-xs:0 1px 2px rgba(16,16,25,.06);
  --shadow-sm:0 1px 3px rgba(16,16,25,.08),0 1px 2px rgba(16,16,25,.04);
  --shadow:0 4px 12px rgba(16,16,25,.08),0 1px 3px rgba(16,16,25,.05);
  --shadow-lg:0 12px 32px rgba(16,16,25,.12),0 4px 10px rgba(16,16,25,.06);
  --shadow-xl:0 24px 60px rgba(16,16,25,.18),0 8px 20px rgba(16,16,25,.08);

  --chart-1:#3b82f6; --chart-2:#1e3a8a; --chart-3:#60a5fa; --chart-4:#bfdbfe;
  --chart-5:#7b3cf6; --chart-6:#16a34a; --chart-7:#ca8a04; --chart-8:#db2777;

  --topbar-h:60px; --sidebar-w:264px; --panel-w:320px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--neutral-975);
  --bg-sunken:var(--black);
  --surface:var(--neutral-950);
  --surface-raised:var(--neutral-900);
  --surface-hover:var(--neutral-900);
  --line:#26262f;
  --line-strong:var(--neutral-700);
  --ink:var(--neutral-50);
  --ink-muted:var(--neutral-400);
  --ink-faint:var(--neutral-500);
  --primary:var(--violet-400);
  --primary-hover:var(--violet-300);
  --primary-soft:rgba(123,60,246,.18);
  --primary-text:var(--violet-300);
  --on-primary:var(--neutral-975);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow:0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6);
  --shadow-xl:0 24px 60px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--family-product);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
button,input,select,textarea{font:inherit;color:inherit}
