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

/* ============================================================
   True Story — "Calm & Clean" dashboard theme
   Injected by nginx sub_filter. Overrides Chatwoot's raw color
   scales, so every Tailwind utility that reads them re-colors.
   No source changes, no image rebuild.
   ============================================================ */

/* ---------- LIGHT ---------- */
:root {
  /* neutrals: warm stone instead of cool slate */
  --slate-1: 250 250 249;
  --slate-2: 247 246 244;
  --slate-3: 241 240 237;
  --slate-4: 235 233 229;
  --slate-5: 228 226 221;
  --slate-6: 220 217 211;
  --slate-7: 208 204 197;
  --slate-8: 188 183 174;
  --slate-9: 146 141 132;
  --slate-10: 133 128 119;
  --slate-11: 99 95 88;
  --slate-12: 41 37 36;

  --gray-1: 250 250 249;
  --gray-2: 247 246 244;
  --gray-3: 241 240 237;
  --gray-4: 235 233 229;
  --gray-5: 228 226 221;
  --gray-6: 220 217 211;
  --gray-7: 208 204 197;
  --gray-8: 188 183 174;
  --gray-9: 146 141 132;
  --gray-10: 133 128 119;
  --gray-11: 99 95 88;
  --gray-12: 41 37 36;

  /* brand: muted sage green replaces iris/blue */
  --iris-1: 250 252 251;
  --iris-2: 244 249 246;
  --iris-3: 233 243 238;
  --iris-4: 220 235 228;
  --iris-5: 204 225 215;
  --iris-6: 183 212 199;
  --iris-7: 155 194 178;
  --iris-8: 118 169 149;
  --iris-9: 79 122 107;
  --iris-10: 70 110 96;
  --iris-11: 60 95 83;
  --iris-12: 27 46 40;

  --blue-1: 250 252 251;
  --blue-2: 244 249 246;
  --blue-3: 233 243 238;
  --blue-4: 220 235 228;
  --blue-5: 204 225 215;
  --blue-6: 183 212 199;
  --blue-7: 155 194 178;
  --blue-8: 118 169 149;
  --blue-9: 79 122 107;
  --blue-10: 70 110 96;
  --blue-11: 60 95 83;
  --blue-12: 27 46 40;

  --violet-9: 109 122 168;
  --violet-10: 98 110 153;
  --violet-11: 84 95 133;

  /* status colours: softened, still legible */
  --amber-9: 180 83 9;
  --amber-10: 161 74 8;
  --amber-11: 146 64 14;
  --ruby-9: 172 71 71;
  --ruby-10: 155 62 62;
  --ruby-11: 140 56 56;
  --teal-9: 76 125 118;
  --teal-10: 67 112 106;
  --teal-11: 58 98 93;

  --solid-blue: 79 122 107;
  --solid-iris: 79 122 107;
  --solid-purple: 109 122 168;
  --solid-amber: 180 83 9;
  --solid-red: 172 71 71;

  /* shape + depth tokens used by the rules below */
  --ts-radius: 8px;
  --ts-radius-lg: 12px;
  --ts-shadow: 0 1px 2px rgb(41 37 36 / 4%);
  --ts-shadow-md: 0 1px 3px rgb(41 37 36 / 5%), 0 4px 12px rgb(41 37 36 / 4%);
  --ts-border: rgb(228 226 221);
  --ts-surface: rgb(255 255 255);
  --ts-canvas: rgb(250 250 249);
}

/* ---------- DARK ---------- */
.dark {
  --slate-1: 24 23 22;
  --slate-2: 28 27 26;
  --slate-3: 35 33 32;
  --slate-4: 42 40 38;
  --slate-5: 50 47 45;
  --slate-6: 60 56 54;
  --slate-7: 76 71 68;
  --slate-8: 104 98 94;
  --slate-9: 138 132 126;
  --slate-10: 156 150 144;
  --slate-11: 186 181 175;
  --slate-12: 243 241 238;

  --gray-1: 24 23 22;
  --gray-2: 28 27 26;
  --gray-3: 35 33 32;
  --gray-4: 42 40 38;
  --gray-5: 50 47 45;
  --gray-6: 60 56 54;
  --gray-7: 76 71 68;
  --gray-8: 104 98 94;
  --gray-9: 138 132 126;
  --gray-10: 156 150 144;
  --gray-11: 186 181 175;
  --gray-12: 243 241 238;

  --iris-9: 122 168 150;
  --iris-10: 137 180 163;
  --iris-11: 158 197 181;
  --blue-9: 122 168 150;
  --blue-10: 137 180 163;
  --blue-11: 158 197 181;

  --solid-blue: 122 168 150;
  --solid-iris: 122 168 150;

  --ts-shadow: 0 1px 2px rgb(0 0 0 / 30%);
  --ts-shadow-md: 0 1px 3px rgb(0 0 0 / 35%), 0 4px 12px rgb(0 0 0 / 25%);
  --ts-border: rgb(50 47 45);
  --ts-surface: rgb(28 27 26);
  --ts-canvas: rgb(24 23 22);
}

/* ---------- TYPOGRAPHY ---------- */
html, body,
button, input, textarea, select, optgroup,
.ProseMirror {
  font-family: 'Assistant', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { letter-spacing: -0.006em; }

/* Hebrew reads better with a touch more line-height and weight contrast */
:lang(he), [dir='rtl'] { line-height: 1.6; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; font-weight: 700; }

/* code / monospace stays mono */
code, pre, kbd, samp, .font-mono {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace !important;
}

/* ---------- SHAPE + DEPTH ---------- */
.rounded-lg  { border-radius: var(--ts-radius) !important; }
.rounded-xl  { border-radius: var(--ts-radius-lg) !important; }
.rounded-md  { border-radius: 6px !important; }

button:not(.rounded-full):not([class*='rounded-full']),
.button,
input:not([type='checkbox']):not([type='radio']),
textarea,
select {
  border-radius: var(--ts-radius) !important;
}

/* calmer, flatter surfaces — trade heavy shadows for hairline borders */
.shadow, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: var(--ts-shadow-md) !important;
}
.shadow-sm { box-shadow: var(--ts-shadow) !important; }

/* softer focus ring in the brand colour */
*:focus-visible {
  outline: 2px solid rgb(var(--iris-9)) !important;
  outline-offset: 2px !important;
}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: no-preference) {
  button, a, .cursor-pointer {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
}

/* ============================================================
   SEMANTIC SURFACE LAYER
   These drive bg-n-background / bg-n-solid-* / bg-n-surface-*
   ============================================================ */
:root {
  --background-color: 250 250 249;
  --background-input-box: 247 246 244;
  --solid-1: 255 255 255;
  --solid-2: 255 255 255;
  --solid-3: 250 250 249;
  --surface-1: 252 252 251;
  --surface-2: 255 255 255;
  --surface-active: 241 240 237;
  --card-color: 255 255 255;
  --button-color: 255 255 255;
  --border-weak: 235 233 229;
  --border-strong: 220 217 211;
  --border-container: 235 233 229;
  --alpha-1: 220, 217, 211, .22;
  --alpha-2: 208, 204, 197, .22;
  --alpha-3: 188, 183, 174, .22;
  --label-background: 241 240 237;
}

.dark {
  --background-color: 24 23 22;
  --background-input-box: 35 33 32;
  --solid-1: 28 27 26;
  --solid-2: 35 33 32;
  --solid-3: 42 40 38;
  --surface-1: 28 27 26;
  --surface-2: 35 33 32;
  --surface-active: 50 47 45;
  --card-color: 28 27 26;
  --button-color: 35 33 32;
  --border-weak: 42 40 38;
  --border-strong: 60 56 54;
  --border-container: 42 40 38;
  --alpha-1: 60, 56, 54, .3;
  --alpha-2: 76, 71, 68, .3;
  --alpha-3: 104, 98, 94, .3;
  --label-background: 42 40 38;
}

/* ============================================================
   BRAND OVERRIDE
   n-brand is a hardcoded #2781F6 in theme/colors.js, so it can
   only be reached by overriding the compiled utilities.
   ============================================================ */
:root { --ts-brand: 79 122 107; }
.dark { --ts-brand: 122 168 150; }

/* fills */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.group-hover\:bg-n-brand,
.after\:bg-n-brand:after,
.before\:bg-n-brand:before,
.dark\:checked\:bg-n-brand:checked:is(.dark *)
{ background-color: rgb(var(--ts-brand)) !important; }

.bg-n-brand\/5    { background-color: rgb(var(--ts-brand) / .05) !important; }
.bg-n-brand\/10,
.dark\:bg-n-brand\/10:is(.dark *)   { background-color: rgb(var(--ts-brand) / .10) !important; }
.bg-n-brand\/20   { background-color: rgb(var(--ts-brand) / .20) !important; }
.hover\:bg-n-brand\/10:hover  { background-color: rgb(var(--ts-brand) / .10) !important; }
.hover\:bg-n-brand\/80:hover  { background-color: rgb(var(--ts-brand) / .80) !important; }
.hover\:enabled\:bg-n-brand\/20:enabled:hover,
.focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgb(var(--ts-brand) / .20) !important; }
.from-n-brand\/15 { --tw-gradient-from: rgb(var(--ts-brand) / .15) !important; }

/* text */
.text-n-brand,
.hover\:text-n-brand:hover,
.group-hover\:text-n-brand,
.group-focus-within\:text-n-brand,
.dark\:hover\:text-n-brand:hover:is(.dark *),
.text-link
{ color: rgb(var(--ts-brand)) !important; }

/* borders */
.border-n-brand,
.border-t-n-brand,
.checked\:border-n-brand:checked,
.indeterminate\:border-n-brand:indeterminate,
.hover\:border-n-brand:hover,
.focus\:border-n-brand:focus,
.dark\:border-n-brand:is(.dark *),
.dark\:checked\:border-n-brand:checked:is(.dark *),
.before\:\!border-t-n-brand:before
{ border-color: rgb(var(--ts-brand)) !important; }

.border-n-brand\/50 { border-color: rgb(var(--ts-brand) / .5) !important; }

/* outline + ring */
.outline-n-brand,
.\!outline-n-brand,
.focus\:outline-n-brand:focus,
.focus-visible\:outline-n-brand:focus-visible,
.focus-within\:outline-n-brand:focus-within,
.dark\:\!outline-n-brand:is(.dark *),
.dark\:focus\:outline-n-brand:focus:is(.dark *),
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *),
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *)
{ outline-color: rgb(var(--ts-brand)) !important; }

.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus-visible\:ring-n-brand:focus-visible,
.focus-within\:ring-n-brand:focus-within,
.dark\:ring-n-brand:is(.dark *)
{ --tw-ring-color: rgb(var(--ts-brand)) !important; }