/* Nexaminds CRM design tokens (monday-style, Vibe names). Spec §1.1, §1.5, QA-6.1.
   Component CSS must reference these variables, never hard-coded hex values. */
:root {
  /* ---------- Brand / primary (stays blue in monday CRM 2026, see Decision A) ---------- */
  --primary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #cce5ff;
  --primary-selected-hover-color: #aed4fc;
  --primary-highlighted-color: #f0f7ff;
  --brand-color: #0073ea;
  --brand-hover-color: #0060b9;

  /* ---------- Text ---------- */
  --primary-text-color: #323338;
  --secondary-text-color: #676879;
  --placeholder-color: #676879;
  --icon-color: #676879;
  --link-color: #1f76c2;
  --text-color-on-primary: #ffffff;
  --text-color-on-inverted: #ffffff;
  --disabled-text-color: rgba(50, 51, 56, 0.38);
  --pulse-text-color: #666666;          /* board Date-cell text (neutral grey, not bluish) */

  /* ---------- Backgrounds ---------- */
  --primary-background-color: #ffffff;
  --primary-background-color-rgb: 255, 255, 255;
  --secondary-background-color: #ffffff;
  --primary-background-hover-color: rgba(103, 104, 121, 0.1);  /* ≈ #f0f0f2 on white */
  --grey-background-color: #f6f7fb;
  --allgrey-background-color: #f6f7fb;
  --ui-background-color: #e7e9ef;
  --ui-background-hover-color: #d8d9e0;
  --disabled-background-color: #ecedf5;
  --inverted-color-background: #323338;
  --primary-surface-color: #eceff8;     /* legacy 2025 frame; not used by the 2026 shell */

  /* ---------- App shell (monday prod, new-layout-2026) ---------- */
  --surface-color: var(--allgrey-background-color);   /* #f6f7fb top bar + rail + page */
  --application-border-color: #e7e9ef;  /* 1px border on the white panels */

  /* ---------- Borders ---------- */
  --ui-border-color: #c3c6d4;           /* inputs, secondary buttons, checkboxes, scrollbar */
  --layout-border-color: #d0d4e4;       /* table grid, dividers, tab bars */
  --border-width: 1px;
  --border-style: solid;

  /* ---------- Semantic ---------- */
  --positive-color: #00854d;  --positive-color-hover: #007038;  --positive-color-selected: #bbdbc9;  --positive-color-selected-hover: #b5cec0;
  --negative-color: #d83a52;  --negative-color-hover: #b63546;  --negative-color-selected: #f4c3cb;  --negative-color-selected-hover: #ecb7bf;
  --warning-color:  #ffcb00;  --warning-color-hover:  #eaaa15;  --warning-color-selected:  #fceba1;  --warning-color-selected-hover:  #f2d973;
  --backdrop-color: rgba(41, 47, 76, 0.7);

  /* ---------- Board / item ("pulse") ---------- */
  --table-border-color: var(--layout-border-color);
  --table-background-color: #ffffff;
  --pulse-background-color: #f5f6f8;          /* row hover, header-cell hover, Kanban value cells */
  --pulse-hover-background-color: #e6e9ef;    /* collapsed-group hover, count-pill hover */
  --pulse-selected-background-color: #e5f4ff; /* filter-highlighted cell */
  --board-elevation: 0 8px 8px -8px rgba(0, 0, 0, 0.1);
  --sticky-column-shadow: 3px 0 4px rgba(0, 0, 0, 0.1);
  --floating-header-shadow: 4px 6px 15px -8px #c3c6d4;
  --row-hover-shadow: 4px 3px 6px -3px #c3c6d4;
  --person-empty-color: #c5c7d0;
  --counter-dark: #333333;                    /* "+N" people counter */

  /* ---------- monday CRM-specific (sampled; no Vibe token) ---------- */
  --crm-selected-color: #d1ecef;        /* rail tile + left-pane row selected */
  --crm-selected-hover-color: #c6dfe3;
  --crm-chip-color: #d1ecf0;            /* connected-item / entity chips (Contacts, Accounts, Deals) */
  --crm-field-box-color: #f5f6f8;       /* box that holds connected chips in item-card fields */
  --crm-field-border-color: #e7e9ef;    /* 40px value boxes in item-card info widgets */
  --crm-stage-inactive: #c3c6d4;        /* Deal stages chevron, future/past segments */
  --crm-stage-inactive-text: #323338;   /* Dark text: white on this gray is too light to read */
  --crm-stage-active: #00854d;          /* Deal stages chevron, current segment */
  --timeline-line-color: #dee1ec;

  /* ---------- AI accent (ours, see §8.11 + Decision G) ---------- */
  --ai-color: #6161ff;                  /* monday logo purple: monday-like but distinct from #0073ea */
  --ai-hover-color: #4b4be0;
  --ai-selected-color: #e6e6ff;
  --ai-surface-color: #f5f5ff;
  --ai-text-color: #3d3dc2;             /* text on --ai-selected-color, 6.4:1 */
  --ai-gradient: linear-gradient(90deg, #6161ff 0%, #579bfc 35%, #00c875 70%, #ffcb00 100%);
  --ai-button-gradient: linear-gradient(264.27deg, #6161ff 0%, #4f6cf5 40%, #0073ea 100%);
  --ai-glow: 0 0 0 1px rgba(97, 97, 255, 0.25), 0 6px 24px rgba(97, 97, 255, 0.16);

  /* ---------- Typography ---------- */
  --font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
  --title-font-family: Poppins, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
  --font-h1-bold:   700 29px/36px var(--title-font-family);
  --font-h1-medium: 600 29px/36px var(--title-font-family);
  --font-h1-normal: 500 29px/36px var(--title-font-family);
  --font-h1-light:  300 29px/36px var(--title-font-family);
  --font-h2-bold:   700 22px/28px var(--title-font-family);
  --font-h2-medium: 600 22px/28px var(--title-font-family);
  --font-h2-normal: 500 22px/28px var(--title-font-family);
  --font-h2-light:  300 22px/28px var(--title-font-family);
  --font-h3-bold:   700 17px/23px var(--title-font-family);
  --font-h3-medium: 600 17px/23px var(--title-font-family);
  --font-h3-normal: 500 17px/23px var(--title-font-family);
  --font-h3-light:  300 17px/23px var(--title-font-family);
  --font-text1-bold:   700 15px/21px var(--font-family);
  --font-text1-medium: 600 15px/21px var(--font-family);
  --font-text1-normal: 400 15px/21px var(--font-family);
  --font-text2-bold:   700 13px/19px var(--font-family);
  --font-text2-medium: 600 13px/19px var(--font-family);
  --font-text2-normal: 400 13px/19px var(--font-family);
  --font-text3-bold:   700 11.5px/15px var(--font-family);
  --font-text3-medium: 600 11.5px/15px var(--font-family);
  --font-text3-normal: 400 11.5px/15px var(--font-family);
  --letter-spacing-h1: -0.5px;   /* bold/normal/light only; "medium" headings have none */
  --letter-spacing-h2: -0.1px;
  --letter-spacing-h3: -0.1px;

  /* ---------- Spacing ---------- */
  --space-2: 2px;  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-64: 64px; --space-80: 80px;

  /* ---------- Radius ---------- */
  --border-radius-small: 4px;   --border-radius-4: 4px;
  --border-radius-medium: 8px;  --border-radius-8: 8px;
  --border-radius-12: 12px;
  --border-radius-big: 16px;    --border-radius-16: 16px;

  /* ---------- Shadows ---------- */
  --box-shadow-xs:     0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --box-shadow-small:  0px 4px 8px rgba(0, 0, 0, 0.2);
  --box-shadow-medium: 0px 6px 20px rgba(0, 0, 0, 0.2);
  --box-shadow-large:  0px 15px 50px rgba(0, 0, 0, 0.3);

  /* ---------- Motion ---------- */
  --motion-productive-short: 70ms;
  --motion-productive-medium: 100ms;
  --motion-productive-long: 150ms;
  --motion-expressive-short: 250ms;
  --motion-expressive-long: 400ms;
  --motion-timing-enter: cubic-bezier(0, 0, 0.35, 1);
  --motion-timing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-timing-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-timing-emphasize: cubic-bezier(0, 0, 0.2, 1.4);

  --disabled-component-opacity: 0.38;

  /* ---------- Layout sizes (§2) ---------- */
  --topbar-height: 48px;
  --rail-width: 72px;
  --leftpane-width: 280px;
  --item-panel-width: 700px;
  --row-height: 36px;
  --group-title-height: 40px;
  --group-bar-width: 6px;
  --board-gutter: 40px;
}
:root {
  --color-grass_green:#037f4c;   --color-grass_green-hover:#116846;   --color-grass_green-selected:#81bfa5;
  --color-done-green:#00c875;    --color-done-green-hover:#0f9b63;    --color-done-green-selected:#80e3ba;
  --color-bright-green:#9cd326;  --color-bright-green-hover:#7ca32b;  --color-bright-green-selected:#cde992;
  --color-saladish:#cab641;      --color-saladish-hover:#9d8f3e;      --color-saladish-selected:#e4daa0;
  --color-egg_yolk:#ffcb00;      --color-egg_yolk-hover:#eaaa15;      --color-egg_yolk-selected:#ffe580;
  --color-working_orange:#fdab3d;--color-working_orange-hover:#c0873c;--color-working_orange-selected:#fed59e;
  --color-dark-orange:#ff6d3b;   --color-dark-orange-hover:#c25531;   --color-dark-orange-selected:#ffb196;
  --color-peach:#ffadad;         --color-peach-hover:#c2888a;         --color-peach-selected:#ffd6d6;
  --color-sunset:#ff7575;        --color-sunset-hover:#c26163;        --color-sunset-selected:#ffbaba;
  --color-stuck-red:#df2f4a;     --color-stuck-red-hover:#ad3f51;     --color-stuck-red-selected:#f0a1ad;
  --color-dark-red:#bb3354;      --color-dark-red-hover:#92334c;      --color-dark-red-selected:#dd99a9;
  --color-sofia_pink:#e50073;    --color-sofia_pink-hover:#c20062;    --color-sofia_pink-selected:#ff8ac4;
  --color-lipstick:#ff5ac4;      --color-lipstick-hover:#c24e9a;      --color-lipstick-selected:#fface1;
  --color-bubble:#faa1f1;        --color-bubble-hover:#be80ba;        --color-bubble-selected:#fcd0f8;
  --color-purple:#9d50dd;        --color-purple-hover:#7d45b0;        --color-purple-selected:#d0aeed;
  --color-dark_purple:#784bd1;   --color-dark_purple-hover:#6344a3;   --color-dark_purple-selected:#bba5e8;
  --color-berry:#7e3b8a;         --color-berry-hover:#673971;         --color-berry-selected:#be9dc4;
  --color-dark_indigo:#401694;   --color-dark_indigo-hover:#3c1f78;   --color-dark_indigo-selected:#a08bc9;
  --color-indigo:#5559df;        --color-indigo-hover:#4b4ead;        --color-indigo-selected:#aaacef;
  --color-navy:#225091;          --color-navy-hover:#274776;          --color-navy-selected:#90a7c8;
  --color-bright-blue:#579bfc;   --color-bright-blue-hover:#4c7cc1;   --color-bright-blue-selected:#abcdfd;
  --color-dark-blue:#007eb5;     --color-dark-blue-hover:#0f6d97;     --color-dark-blue-selected:#80c2df;
  --color-aquamarine:#4eccc6;    --color-aquamarine-hover:#469e9b;    --color-aquamarine-selected:#a6e5e2;
  --color-chili-blue:#66ccff;    --color-chili-blue-hover:#569ec3;    --color-chili-blue-selected:#b2e5ff;
  --color-river:#74afcc;         --color-river-hover:#588095;         --color-river-selected:#b3d0de;
  --color-winter:#9aadbd;        --color-winter-hover:#7b8895;        --color-winter-selected:#ccd6de;
  --color-explosive:#c4c4c4;     --color-explosive-hover:#98999a;     --color-explosive-selected:#e1e1e1;
  --color-american_gray:#757575; --color-american_gray-hover:#69696a; --color-american_gray-selected:#bfbfbf;
  --color-blackish:#333333;      --color-blackish-hover:#222222;      --color-blackish-selected:#999999;
  --color-brown:#7f5347;         --color-brown-hover:#684943;         --color-brown-selected:#bfa9a3;
  --color-orchid:#e484bd;        --color-orchid-hover:#ae5d8d;        --color-orchid-selected:#ecbad7;
  --color-tan:#bca58a;           --color-tan-hover:#8a7862;           --color-tan-selected:#d6cabc;
  --color-sky:#a1e3f6;           --color-sky-hover:#81b6c5;           --color-sky-selected:#d0f1fa;
  --color-coffee:#cd9282;        --color-coffee-hover:#976758;        --color-coffee-selected:#dec0b7;
  --color-royal:#216edf;         --color-royal-hover:#225eb7;         --color-royal-selected:#95bbf2;
  --color-teal:#175a63;          --color-teal-hover:#12484f;          --color-teal-selected:#8bacb1;
  --color-lavender:#bda8f9;      --color-lavender-hover:#9786c7;      --color-lavender-selected:#ded4fc;
  --color-steel:#a9bee8;         --color-steel-hover:#8798ba;         --color-steel-selected:#d4dff4;
  --color-lilac:#9d99b9;         --color-lilac-hover:#7e7a94;         --color-lilac-selected:#ceccdc;
  --color-pecan:#563e3e;         --color-pecan-hover:#453232;         --color-pecan-selected:#ab9f9f;
}
:root {
  /* Text on each content color: white or dark, whichever meets WCAG AA (4.5:1). Light colors keep their own fill on hover,
     because their darker hover color would make the dark text hard to read. Checked by tests/contrast.test.js. */
  --color-grass_green-text:#fff; --color-grass_green-hover-fill:var(--color-grass_green-hover);
  --color-done-green-text:#323338; --color-done-green-hover-fill:var(--color-done-green);
  --color-bright-green-text:#323338; --color-bright-green-hover-fill:var(--color-bright-green);
  --color-saladish-text:#323338; --color-saladish-hover-fill:var(--color-saladish);
  --color-egg_yolk-text:#323338; --color-egg_yolk-hover-fill:var(--color-egg_yolk-hover);
  --color-working_orange-text:#323338; --color-working_orange-hover-fill:var(--color-working_orange);
  --color-dark-orange-text:#323338; --color-dark-orange-hover-fill:var(--color-dark-orange);
  --color-peach-text:#323338; --color-peach-hover-fill:var(--color-peach);
  --color-sunset-text:#323338; --color-sunset-hover-fill:var(--color-sunset);
  --color-stuck-red-text:#fff; --color-stuck-red-hover-fill:var(--color-stuck-red-hover);
  --color-dark-red-text:#fff; --color-dark-red-hover-fill:var(--color-dark-red-hover);
  --color-sofia_pink-text:#fff; --color-sofia_pink-hover-fill:var(--color-sofia_pink-hover);
  --color-lipstick-text:#323338; --color-lipstick-hover-fill:var(--color-lipstick);
  --color-bubble-text:#323338; --color-bubble-hover-fill:var(--color-bubble);
  --color-purple-text:#fff; --color-purple-hover-fill:var(--color-purple-hover);
  --color-dark_purple-text:#fff; --color-dark_purple-hover-fill:var(--color-dark_purple-hover);
  --color-berry-text:#fff; --color-berry-hover-fill:var(--color-berry-hover);
  --color-dark_indigo-text:#fff; --color-dark_indigo-hover-fill:var(--color-dark_indigo-hover);
  --color-indigo-text:#fff; --color-indigo-hover-fill:var(--color-indigo-hover);
  --color-navy-text:#fff; --color-navy-hover-fill:var(--color-navy-hover);
  --color-bright-blue-text:#323338; --color-bright-blue-hover-fill:var(--color-bright-blue);
  --color-dark-blue-text:#fff; --color-dark-blue-hover-fill:var(--color-dark-blue-hover);
  --color-aquamarine-text:#323338; --color-aquamarine-hover-fill:var(--color-aquamarine);
  --color-chili-blue-text:#323338; --color-chili-blue-hover-fill:var(--color-chili-blue);
  --color-river-text:#323338; --color-river-hover-fill:var(--color-river);
  --color-winter-text:#323338; --color-winter-hover-fill:var(--color-winter);
  --color-explosive-text:#323338; --color-explosive-hover-fill:var(--color-explosive);
  --color-american_gray-text:#fff; --color-american_gray-hover-fill:var(--color-american_gray-hover);
  --color-blackish-text:#fff; --color-blackish-hover-fill:var(--color-blackish-hover);
  --color-brown-text:#fff; --color-brown-hover-fill:var(--color-brown-hover);
  --color-orchid-text:#323338; --color-orchid-hover-fill:var(--color-orchid);
  --color-tan-text:#323338; --color-tan-hover-fill:var(--color-tan);
  --color-sky-text:#323338; --color-sky-hover-fill:var(--color-sky-hover);
  --color-coffee-text:#323338; --color-coffee-hover-fill:var(--color-coffee);
  --color-royal-text:#fff; --color-royal-hover-fill:var(--color-royal-hover);
  --color-teal-text:#fff; --color-teal-hover-fill:var(--color-teal-hover);
  --color-lavender-text:#323338; --color-lavender-hover-fill:var(--color-lavender);
  --color-steel-text:#323338; --color-steel-hover-fill:var(--color-steel);
  --color-lilac-text:#323338; --color-lilac-hover-fill:var(--color-lilac);
  --color-pecan-text:#fff; --color-pecan-hover-fill:var(--color-pecan-hover);
}
:root {
  /* Our 8 stored label colors mapped to content colors (spec §8.12, Decision H). */
  --label-blue: var(--color-bright-blue);   --label-blue-selected: var(--color-bright-blue-selected);
  --label-green: var(--color-done-green);   --label-green-selected: var(--color-done-green-selected);
  --label-amber: var(--color-working_orange); --label-amber-selected: var(--color-working_orange-selected);
  --label-red: var(--color-stuck-red);      --label-red-selected: var(--color-stuck-red-selected);
  --label-lilac: var(--color-purple);       --label-lilac-selected: var(--color-purple-selected);
  --label-teal: var(--color-aquamarine);    --label-teal-selected: var(--color-aquamarine-selected);
  --label-pink: var(--color-lipstick);      --label-pink-selected: var(--color-lipstick-selected);
  --label-gray: var(--color-explosive);     --label-gray-selected: var(--color-explosive-selected);
  --label-blue-text: var(--color-bright-blue-text);

  /* Shell extras */
  --counter-text-size: 12px;
  --rail-label-color: var(--secondary-text-color);
  --search-pill-background: rgba(103, 104, 121, 0.1);
  --keycap-background: var(--disabled-background-color);
  --separator-color: var(--layout-border-color);
  --tooltip-background: var(--inverted-color-background);
  --focus-ring: 0 0 0 3px hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;
  --ai-placeholder-color: #9699a6;
  --leftpane-motion: 300ms var(--motion-timing-transition);

  /* AI sparkle mask (QA-6.1): a rounded four-point star, coloured with a conic gradient. */
  --sparkle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5C10.6 1.5 11 2 11.2 2.6C11.9 5.4 14.6 8.1 17.4 8.8C18 9 18.5 9.4 18.5 10C18.5 10.6 18 11 17.4 11.2C14.6 11.9 11.9 14.6 11.2 17.4C11 18 10.6 18.5 10 18.5C9.4 18.5 9 18 8.8 17.4C8.1 14.6 5.4 11.9 2.6 11.2C2 11 1.5 10.6 1.5 10C1.5 9.4 2 9 2.6 8.8C5.4 8.1 8.1 5.4 8.8 2.6C9 2 9.4 1.5 10 1.5Z'/%3E%3C/svg%3E");
  --sparkle-gradient: conic-gradient(from 0deg, #00c875 0deg, #ffcb00 55deg, #ff7575 95deg, #c36af5 135deg, #6161ff 200deg, #0073ea 230deg, #26d8c8 290deg, #00c875 360deg);
}

/* ---------- Base elements (spec §1.1 body baseline, §1.2 fonts) ---------- */
html, body { background: var(--surface-color); color: var(--primary-text-color); font: var(--font-text2-normal);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; }
h1, h2, h3, .title { font-family: var(--title-font-family); color: var(--primary-text-color); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link-color); }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .focusable:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--border-radius-small); }
.on-primary:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 0 0 1px #fff inset; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ui-border-color); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: var(--ui-border-color) transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg.icon { flex: none; display: inline-block; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }