/* ==========================================================================
   Vellum Sign — design tokens
   Restrained enterprise palette, one confident accent (Vellum blue).
   ========================================================================== */

:root {
  /* ---- type ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;
  --lh-loose: 1.65;

  /* ---- neutral ramp (cool slate) ---- */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f6f8fa;
  --n-75:  #f1f4f7;
  --n-100: #e9edf2;
  --n-150: #dee4ea;
  --n-200: #d2dae2;
  --n-300: #b6c1cd;
  --n-400: #91a0b0;
  --n-500: #6d7d8e;
  --n-600: #55636f;
  --n-700: #3f4a55;
  --n-800: #2b333c;
  --n-900: #1b2128;
  --n-950: #0f1318;

  /* ---- accent (Vellum blue) ---- */
  --a-25:  #f3f7ff;
  --a-50:  #eaf1ff;
  --a-100: #d8e4ff;
  --a-200: #b6cbff;
  --a-300: #8aabfb;
  --a-400: #5b85f4;
  --a-500: #2c5ce6;
  --a-600: #2450ce;
  --a-700: #1d41a9;
  --a-800: #193586;
  --a-900: #16296a;

  /* ---- semantic hues ---- */
  --ok-50:  #e8f7ee;  --ok-100: #cfeedd; --ok-500: #17864a; --ok-600: #12703d; --ok-700: #0e5a31;
  --warn-50:#fff5e3; --warn-100:#ffe8bf; --warn-500:#a86400; --warn-600:#8b5300; --warn-700:#6f4200;
  --err-50: #fdecec;  --err-100:#fad4d4;  --err-500:#c22e2e; --err-600:#a52424; --err-700:#851c1c;
  --info-50:#e9f3fb;  --info-100:#cfe6f7; --info-500:#1f6fa8; --info-600:#175a8a;
  --plum-50:#f6eefb;  --plum-100:#ead9f6; --plum-500:#7b3fa8; --plum-600:#653389;

  /* ---- surfaces / text (light) ---- */
  --bg-app: var(--n-75);
  --bg-canvas: #e6eaee;
  --bg-surface: var(--n-0);
  --bg-sunken: var(--n-50);
  --bg-raised: var(--n-0);
  --bg-nav: #ffffff;
  --bg-topbar: #ffffff;
  --bg-hover: var(--n-50);
  --bg-active: var(--n-75);
  --bg-selected: var(--a-25);
  --bg-inverse: var(--n-900);
  --bg-scrim: rgba(15, 19, 24, 0.44);

  --tx-1: var(--n-900);
  --tx-2: var(--n-700);
  --tx-3: var(--n-500);
  --tx-4: var(--n-400);
  --tx-inverse: #ffffff;
  --tx-accent: var(--a-600);
  --tx-link: var(--a-600);

  --br-1: var(--n-150);
  --br-2: var(--n-200);
  --br-3: var(--n-300);
  --br-strong: var(--n-400);
  --br-accent: var(--a-500);

  --paper: #ffffff;
  --paper-ink: #14181d;
  --paper-rule: #dfe3e8;

  /* ---- elevation ---- */
  --sh-xs: 0 1px 1px rgba(16, 24, 40, .04), 0 0 0 1px rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .07);
  --sh-md: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 14px -2px rgba(16, 24, 40, .10);
  --sh-lg: 0 8px 12px -4px rgba(16, 24, 40, .08), 0 18px 32px -6px rgba(16, 24, 40, .16);
  --sh-xl: 0 12px 20px -8px rgba(16, 24, 40, .10), 0 32px 60px -12px rgba(16, 24, 40, .26);
  --sh-paper: 0 1px 2px rgba(16, 24, 40, .10), 0 6px 16px -4px rgba(16, 24, 40, .18);
  --sh-focus: 0 0 0 3px var(--focus-ring);

  --focus-ring: rgba(44, 92, 230, .38);
  --focus-ring-err: rgba(194, 46, 46, .35);

  /* ---- radii ---- */
  --r-2: 2px;
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-pill: 999px;

  /* ---- spacing ---- */
  --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;  --s-5: 10px;
  --s-6: 12px; --s-7: 14px; --s-8: 16px; --s-9: 20px; --s-10: 24px;
  --s-11: 28px; --s-12: 32px; --s-13: 40px; --s-14: 48px; --s-15: 64px;

  /* ---- layout ---- */
  --nav-w: 244px;
  --nav-w-collapsed: 62px;
  --topbar-h: 56px;
  --subbar-h: 48px;
  --page-max: 1400px;

  /* ---- motion ---- */
  --dur-1: 90ms;
  --dur-2: 140ms;
  --dur-3: 200ms;
  --dur-4: 280ms;
  --dur-5: 420ms;
  --ease: cubic-bezier(.32, .72, .28, 1);
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --ease-in: cubic-bezier(.5, 0, .9, .4);
  --ease-spring: cubic-bezier(.22, 1.2, .36, 1);

  --z-sticky: 20;
  --z-nav: 40;
  --z-drawer: 60;
  --z-menu: 70;
  --z-modal: 80;
  --z-toast: 90;
  --z-drag: 95;

  /* ---- recipient colour set (fill / border / ink / soft) ---- */
  --rc1-fill: #d6e4ff; --rc1-bd: #2c5ce6; --rc1-ink: #163a94; --rc1-soft: #eef4ff;
  --rc2-fill: #ffe6c7; --rc2-bd: #c97a10; --rc2-ink: #7a4707; --rc2-soft: #fff6ea;
  --rc3-fill: #d3f0dd; --rc3-bd: #17864a; --rc3-ink: #0d5230; --rc3-soft: #edfaf2;
  --rc4-fill: #f5d9ee; --rc4-bd: #a83b8a; --rc4-ink: #6d2359; --rc4-soft: #fdeff8;
  --rc5-fill: #d5eef5; --rc5-bd: #157f9c; --rc5-ink: #0c4d5f; --rc5-soft: #ecf8fc;
  --rc6-fill: #e3ddf7; --rc6-bd: #6a4fc4; --rc6-ink: #402e83; --rc6-soft: #f4f1fd;
  --rc7-fill: #ffdcdc; --rc7-bd: #c53a3a; --rc7-ink: #7f2020; --rc7-soft: #fff0f0;
  --rc8-fill: #e2ecc9; --rc8-bd: #5f7d1c; --rc8-ink: #3b4f0f; --rc8-soft: #f3f8e7;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg-app: #10151b;
  --bg-canvas: #0b0f14;
  --bg-surface: #171d25;
  --bg-sunken: #131922;
  --bg-raised: #1c232c;
  --bg-nav: #131920;
  --bg-topbar: #131920;
  --bg-hover: #1e252f;
  --bg-active: #232b36;
  --bg-selected: #1a2534;
  --bg-inverse: #e9edf2;
  --bg-scrim: rgba(3, 6, 10, .62);

  --tx-1: #eaeef4;
  --tx-2: #c3ccd7;
  --tx-3: #93a1b1;
  --tx-4: #74818f;
  --tx-inverse: #10151b;
  --tx-accent: #8aabfb;
  --tx-link: #8aabfb;

  --br-1: #262f3a;
  --br-2: #303b48;
  --br-3: #3d4a5a;
  --br-strong: #566473;
  --br-accent: var(--a-400);

  --a-25: #141d2c;
  --a-50: #17223a;
  --a-100: #1d2c4b;
  --a-500: #3f6df0;
  --a-600: #5b85f4;

  --ok-50: #12241a;  --ok-100:#183524; --ok-500:#3ecb7e; --ok-600:#2fb96e;
  --warn-50:#2a2010; --warn-100:#3a2c14; --warn-500:#e6a83c; --warn-600:#d1932a;
  --err-50: #2b1416; --err-100:#3d1a1d; --err-500:#f27a7a; --err-600:#e06565;
  --info-50: #10222e; --info-100:#16303f; --info-500:#5fb2e0;
  --plum-50: #221730; --plum-100:#2e1f42; --plum-500:#b98ada;

  --sh-xs: 0 1px 1px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.045);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --sh-md: 0 2px 4px rgba(0,0,0,.34), 0 8px 18px -4px rgba(0,0,0,.5);
  --sh-lg: 0 10px 16px -6px rgba(0,0,0,.44), 0 22px 40px -8px rgba(0,0,0,.6);
  --sh-xl: 0 16px 28px -10px rgba(0,0,0,.5), 0 40px 72px -16px rgba(0,0,0,.72);
  --sh-paper: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px -6px rgba(0,0,0,.6);
  --focus-ring: rgba(112, 150, 250, .48);
}

/* Compact density (user setting) */
:root[data-density="compact"] {
  --topbar-h: 50px;
  --subbar-h: 42px;
}