/* دليل شات — store pages (/panel/*): the Chatwoot 4.19.1 colour tokens, light and dark (docs/DESIGN-SYSTEM.md §3).
   Values are copied from Chatwoot's app/javascript/dashboard/assets/scss/_next-colors.scss (same RGB-triplet form, so panel.css writes
   rgb(var(--slate-11)) exactly where Chatwoot writes text-n-slate-11). The accent ramp (--blue-*) is the Daleel green and must stay identical
   to infra/chatwoot-theme/theme/daleel.css (test/design-system.test.js compares them). The shell background is Daleel mist in light mode.
   This is the ONLY stylesheet under public/ that may hold colour values; panel.css only references these names.
   Dark mode: `.dark` on <html>, set by theme.js from the Chatwoot window this page is framed in.
   The calm look («الهوية الهادية», docs/DESIGN-SYSTEM.md §12) is the generated block at the end of this file: it comes from
   brand/calm/tokens.json (infra/chatwoot-theme/scripts/build-tokens.js) and applies only under data-daleel-theme="calm". Never edit it by hand. */
:root {
  --slate-1: 252 252 253; --slate-2: 249 249 251; --slate-3: 240 240 243; --slate-4: 232 232 236; --slate-5: 224 225 230; --slate-6: 217 217 224;
  --slate-7: 205 206 214; --slate-8: 185 187 198; --slate-9: 139 141 152; --slate-10: 128 131 141; --slate-11: 96 100 108; --slate-12: 28 32 36;

  --iris-1: 253 253 255; --iris-2: 248 248 255; --iris-3: 240 241 254; --iris-4: 230 231 255; --iris-5: 218 220 255; --iris-6: 203 205 255;
  --iris-7: 184 186 248; --iris-8: 155 158 240; --iris-9: 91 91 214; --iris-10: 81 81 205; --iris-11: 87 83 198; --iris-12: 39 41 98;

  --blue-1: 247 253 250;  --blue-2: 238 251 245;  --blue-3: 227 249 238;  --blue-4: 207 243 225;
  --blue-5: 184 235 210;  --blue-6: 153 223 190;  --blue-7: 111 207 163;  --blue-8: 53 186 127;
  --blue-9: 0 117 63;     --blue-10: 0 104 55;     --blue-11: 0 103 58;    --blue-12: 10 46 29;

  --ruby-1: 255 252 253; --ruby-2: 255 247 248; --ruby-3: 254 234 237; --ruby-4: 255 220 225; --ruby-5: 255 206 214; --ruby-6: 248 191 200;
  --ruby-7: 239 172 184; --ruby-8: 229 146 163; --ruby-9: 229 70 102; --ruby-10: 220 59 93; --ruby-11: 202 36 77; --ruby-12: 100 23 43;

  --amber-1: 254 253 251; --amber-2: 254 251 233; --amber-3: 255 247 194; --amber-4: 255 238 156; --amber-5: 251 229 119; --amber-6: 243 214 115;
  --amber-7: 233 193 98; --amber-8: 226 163 54; --amber-9: 255 197 61; --amber-10: 255 186 24; --amber-11: 171 100 0; --amber-12: 79 52 34;

  --teal-1: 250 254 253; --teal-2: 243 251 249; --teal-3: 224 248 243; --teal-4: 204 243 234; --teal-5: 184 234 224; --teal-6: 161 222 210;
  --teal-7: 131 205 193; --teal-8: 83 185 171; --teal-9: 18 165 148; --teal-10: 13 155 138; --teal-11: 0 133 115; --teal-12: 13 61 56;

  --background-color: 244 244 245;   /* Daleel mist (Chatwoot: 247 247 247) */
  --surface-1: 254 254 254;
  --surface-2: 255 255 255;
  --border-container: 236 236 236;
  --border-strong: 226 227 231;
  --border-weak: 234 234 234;
  --solid-1: 255 255 255;
  --solid-2: 255 255 255;
  --solid-3: 255 255 255;
  --button-color: 255 255 255;
  --label-background: 247 247 247;
  --label-border: 0, 0, 0, 0.04;
  --alpha-1: 215, 215, 215, 0.22;
  --alpha-2: 196, 197, 198, 0.22;
  --black-alpha-1: 0, 0, 0, 0.12;
  --black-alpha-2: 0, 0, 0, 0.04;
  --overlay: 0, 0, 0, 0.12;

  --brand: 0 117 63;                 /* Chatwoot n-brand (theme/colors.js), Daleel green in both modes */
  --on-brand: 255 255 255;
  --qr-surface: 255 255 255;         /* a QR code must stay dark-on-white to scan, in both modes */
  --qr-ink: 28 32 36;                /* so words inside that white box stay dark in both modes too */

  --font: 'IBM Plex Sans Arabic', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Tahoma, Arial, sans-serif;
  color-scheme: light;
}

.dark {
  --slate-1: 17 17 19; --slate-2: 24 25 27; --slate-3: 33 34 37; --slate-4: 39 42 45; --slate-5: 46 49 53; --slate-6: 54 58 63;
  --slate-7: 67 72 78; --slate-8: 90 97 105; --slate-9: 105 110 119; --slate-10: 119 123 132; --slate-11: 176 180 186; --slate-12: 237 238 240;

  --iris-1: 19 19 30; --iris-2: 23 22 37; --iris-3: 32 34 72; --iris-4: 38 42 101; --iris-5: 48 51 116; --iris-6: 61 62 130;
  --iris-7: 74 74 149; --iris-8: 89 88 177; --iris-9: 91 91 214; --iris-10: 84 114 228; --iris-11: 158 177 255; --iris-12: 224 223 254;

  --blue-1: 10 20 15;     --blue-2: 14 27 20;     --blue-3: 13 46 31;     --blue-4: 10 58 38;
  --blue-5: 16 71 47;     --blue-6: 24 88 60;     --blue-7: 32 105 73;    --blue-8: 40 128 89;
  --blue-9: 0 117 63;     --blue-10: 0 133 72;    --blue-11: 61 214 140;  --blue-12: 200 244 220;

  --ruby-1: 25 17 19; --ruby-2: 30 21 23; --ruby-3: 58 20 30; --ruby-4: 78 19 37; --ruby-5: 94 26 46; --ruby-6: 111 37 57;
  --ruby-7: 136 52 71; --ruby-8: 179 68 90; --ruby-9: 229 70 102; --ruby-10: 236 90 114; --ruby-11: 255 148 157; --ruby-12: 254 210 225;

  --amber-1: 22 18 12; --amber-2: 29 24 15; --amber-3: 48 32 8; --amber-4: 63 39 0; --amber-5: 77 48 0; --amber-6: 92 61 5;
  --amber-7: 113 79 25; --amber-8: 143 100 36; --amber-9: 255 197 61; --amber-10: 255 214 10; --amber-11: 255 202 22; --amber-12: 255 231 179;

  --teal-1: 13 21 20; --teal-2: 17 28 27; --teal-3: 13 45 42; --teal-4: 2 59 55; --teal-5: 8 72 67; --teal-6: 20 87 80;
  --teal-7: 28 105 97; --teal-8: 32 126 115; --teal-9: 18 165 148; --teal-10: 14 179 158; --teal-11: 11 216 182; --teal-12: 173 240 221;

  --background-color: 28 29 32;
  --surface-1: 20 21 23;
  --surface-2: 22 23 26;
  --border-container: 255, 255, 255, 0;
  --border-strong: 46 45 50;
  --border-weak: 31 31 37;
  --solid-1: 23 23 26;
  --solid-2: 29 30 36;
  --solid-3: 44 45 54;
  --button-color: 42 43 51;
  --label-background: 36 38 45;
  --label-border: 255, 255, 255, 0.03;
  --alpha-1: 35, 36, 42, 0.8;
  --alpha-2: 147, 153, 176, 0.12;
  --black-alpha-1: 0, 0, 0, 0.3;
  --black-alpha-2: 0, 0, 0, 0.2;
  --overlay: 0, 0, 0, 0.4;
  color-scheme: dark;
}

/* daleel:tokens:start — generated by infra/chatwoot-theme/scripts/build-tokens.js from brand/calm/tokens.json. Do not edit by hand. */
/* new names, today's look: a page without the data-daleel-theme attribute looks exactly as before */
:root {
  --daleel-primary: 0 117 63;
  --daleel-on-primary: 255 255 255;
  --daleel-primary-hover: 0 104 55;
  --daleel-primary-shadow: none;
  --daleel-card-shadow: none;
  --daleel-chart-1: 18 160 110;
  --daleel-chart-2: 235 104 52;
  --daleel-chart-3: 42 120 214;
  --daleel-chart-ordinal-1: 79 189 146;
  --daleel-chart-ordinal-2: 21 156 108;
  --daleel-chart-ordinal-3: 0 122 76;
  --daleel-chart-ordinal-4: 0 85 47;
  --daleel-chart-neutral: 156 151 139;
  --daleel-chart-good: 12 163 12;
  --daleel-chart-warning: 250 178 25;
  --daleel-chart-serious: 236 131 90;
  --daleel-chart-critical: 208 59 59;
}
.dark {
  --daleel-primary: 0 117 63;
  --daleel-on-primary: 255 255 255;
  --daleel-primary-hover: 0 133 72;
  --daleel-primary-shadow: none;
  --daleel-card-shadow: none;
  --daleel-chart-1: 25 158 112;
  --daleel-chart-2: 217 89 38;
  --daleel-chart-3: 57 135 229;
  --daleel-chart-ordinal-1: 11 92 58;
  --daleel-chart-ordinal-2: 15 125 80;
  --daleel-chart-ordinal-3: 25 160 112;
  --daleel-chart-ordinal-4: 76 196 150;
  --daleel-chart-neutral: 107 103 95;
  --daleel-chart-good: 12 163 12;
  --daleel-chart-warning: 250 178 25;
  --daleel-chart-serious: 236 131 90;
  --daleel-chart-critical: 208 59 59;
}
/* the calm look («الهوية الهادية»), light */
:root[data-daleel-theme="calm"] {
  --slate-1: 253 252 250;
  --slate-2: 249 247 242;
  --slate-3: 239 237 231;
  --slate-4: 232 229 222;
  --slate-5: 224 221 213;
  --slate-6: 219 216 208;
  --slate-7: 201 197 187;
  --slate-8: 181 176 165;
  --slate-9: 138 134 124;
  --slate-10: 106 102 94;
  --slate-11: 85 82 75;
  --slate-12: 26 25 23;
  --amber-11: 138 90 0;
  --teal-11: 0 117 101;
  --ruby-11: 196 32 72;
  --background-color: 246 244 238;
  --surface-1: 246 244 238;
  --surface-2: 253 252 250;
  --surface-active: 253 252 250;
  --solid-1: 253 252 250;
  --solid-2: 253 252 250;
  --solid-3: 253 252 250;
  --solid-active: 253 252 250;
  --card-color: 253 252 250;
  --border-container: 232 229 222;
  --border-weak: 232 229 222;
  --border-strong: 219 216 208;
  --button-color: 253 252 250;
  --label-background: 239 237 231;
  --label-border: 31, 30, 27, 0.06;
  --alpha-1: 26, 25, 23, 0.03;
  --alpha-2: 26, 25, 23, 0.05;
  --alpha-3: 253, 252, 250, 0.96;
  --black-alpha-1: 31, 30, 27, 0.12;
  --black-alpha-2: 31, 30, 27, 0.04;
  --background-input-box: 31, 30, 27, 0.03;
  --white-alpha: 253, 252, 250, 0.8;
  --daleel-primary: 26 25 23;
  --daleel-on-primary: 246 241 234;
  --daleel-primary-hover: 85 82 75;
  --daleel-primary-shadow: 0 2px 0 rgba(95, 75, 25, 0.12);
  --daleel-card-shadow: 0 1px 2px rgba(31, 30, 27, 0.04), 0 2px 6px rgba(31, 30, 27, 0.03);
}
/* calm, dark: .dark on <html> (server pages) or on <body> (the Chatwoot app). (0,3,0) beats the light block in either order. */
:root[data-daleel-theme="calm"].dark,
:root[data-daleel-theme="calm"] .dark {
  --slate-1: 21 20 18;
  --slate-2: 27 26 23;
  --slate-3: 35 34 32;
  --slate-4: 43 41 37;
  --slate-5: 50 48 43;
  --slate-6: 59 56 51;
  --slate-7: 69 66 60;
  --slate-8: 94 90 82;
  --slate-9: 111 107 99;
  --slate-10: 149 143 132;
  --slate-11: 185 180 169;
  --slate-12: 239 235 227;
  --amber-11: 255 202 22;
  --teal-11: 11 216 182;
  --ruby-11: 255 148 157;
  --background-color: 21 20 18;
  --surface-1: 21 20 18;
  --surface-2: 27 26 23;
  --surface-active: 50 48 43;
  --solid-1: 27 26 23;
  --solid-2: 30 29 26;
  --solid-3: 39 37 34;
  --solid-active: 50 48 43;
  --card-color: 30 29 26;
  --border-container: 43 41 37;
  --border-weak: 43 41 37;
  --border-strong: 53 51 46;
  --button-color: 39 37 34;
  --label-background: 39 37 34;
  --label-border: 239, 235, 227, 0.04;
  --alpha-1: 35, 34, 32, 0.8;
  --alpha-2: 185, 180, 169, 0.1;
  --alpha-3: 30, 29, 26, 0.95;
  --black-alpha-1: 0, 0, 0, 0.3;
  --black-alpha-2: 0, 0, 0, 0.2;
  --background-input-box: 239, 235, 227, 0.03;
  --white-alpha: 239, 235, 227, 0.1;
  --daleel-primary: 239 235 227;
  --daleel-on-primary: 26 25 23;
  --daleel-primary-hover: 185 180 169;
  --daleel-primary-shadow: none;
  --daleel-card-shadow: none;
}
/* calm, dark by the OS setting: only a page that asks with data-daleel-scheme="auto" (/admin has no script to set a class) */
@media (prefers-color-scheme: dark) {
  :root[data-daleel-theme="calm"][data-daleel-scheme="auto"] {
    --daleel-primary: 239 235 227;
    --daleel-on-primary: 26 25 23;
    --daleel-primary-hover: 185 180 169;
    --daleel-primary-shadow: none;
    --daleel-card-shadow: none;
    --daleel-chart-1: 25 158 112;
    --daleel-chart-2: 217 89 38;
    --daleel-chart-3: 57 135 229;
    --daleel-chart-ordinal-1: 11 92 58;
    --daleel-chart-ordinal-2: 15 125 80;
    --daleel-chart-ordinal-3: 25 160 112;
    --daleel-chart-ordinal-4: 76 196 150;
    --daleel-chart-neutral: 107 103 95;
    --daleel-chart-good: 12 163 12;
    --daleel-chart-warning: 250 178 25;
    --daleel-chart-serious: 236 131 90;
    --daleel-chart-critical: 208 59 59;
    --slate-1: 21 20 18;
    --slate-2: 27 26 23;
    --slate-3: 35 34 32;
    --slate-4: 43 41 37;
    --slate-5: 50 48 43;
    --slate-6: 59 56 51;
    --slate-7: 69 66 60;
    --slate-8: 94 90 82;
    --slate-9: 111 107 99;
    --slate-10: 149 143 132;
    --slate-11: 185 180 169;
    --slate-12: 239 235 227;
    --amber-11: 255 202 22;
    --teal-11: 11 216 182;
    --ruby-11: 255 148 157;
    --background-color: 21 20 18;
    --surface-1: 21 20 18;
    --surface-2: 27 26 23;
    --surface-active: 50 48 43;
    --solid-1: 27 26 23;
    --solid-2: 30 29 26;
    --solid-3: 39 37 34;
    --solid-active: 50 48 43;
    --card-color: 30 29 26;
    --border-container: 43 41 37;
    --border-weak: 43 41 37;
    --border-strong: 53 51 46;
    --button-color: 39 37 34;
    --label-background: 39 37 34;
    --label-border: 239, 235, 227, 0.04;
    --alpha-1: 35, 34, 32, 0.8;
    --alpha-2: 185, 180, 169, 0.1;
    --alpha-3: 30, 29, 26, 0.95;
    --black-alpha-1: 0, 0, 0, 0.3;
    --black-alpha-2: 0, 0, 0, 0.2;
    --background-input-box: 239, 235, 227, 0.03;
    --white-alpha: 239, 235, 227, 0.1;
    color-scheme: dark;
  }
}
/* daleel:tokens:end */