/*
 * Markonect Chat — Axis Growth color theme
 *
 * Source of truth:
 *   _brandsystem/design-system/axis-tokens.css
 *
 * Scope: colors only. Chatwoot layout, typography, spacing, radii and behavior stay upstream.
 * Do not add Markonect-specific colors here. Markonect Chat inherits Axis Growth colors 100%.
 */

:root {
  color-scheme: light;

  /* Axis Growth canonical tokens */
  --axis-primary: #0891a8;
  --axis-primary-variant: #4db8d0;
  --axis-bg-dark: #0d1112;
  --axis-text-primary: #0d1112;
  --axis-text-secondary: #5d686d;
  --axis-text-tertiary: #919a9e;
  --axis-text-auxiliary: #6e7a7e;
  --axis-bg-surface: #fcfdfe;
  --axis-bg-card: #f6f8fa;
  --axis-bg-icon-on-dark: #f0f3f5;
  --axis-border-subtle: #e7ecf1;
  --axis-border-hover: #e1e4e8;
  --axis-border-default: #dfe3e8;
  --axis-border-input: #cfd4da;
  --axis-border-aux: #d5dade;
  --axis-primary-8: rgba(14, 127, 153, 0.08);
  --axis-primary-15: rgba(8, 145, 168, 0.15);
  --axis-error: #e04545;
  --axis-error-bg: rgba(224, 69, 69, 0.08);
  --axis-success: #2da562;
  --axis-success-bg: rgba(45, 165, 98, 0.08);
  --axis-warning: #e5a100;
  --axis-warning-bg: rgba(229, 161, 0, 0.08);
  --axis-info: #3b82f6;
  --axis-info-bg: rgba(59, 130, 246, 0.08);

  /*
   * Chatwoot next-design-system bridge.
   * Every solid value below is an Axis token or a rendered composite of an Axis alpha token.
   */
  --slate-1: 252 253 254;
  --slate-2: 246 248 250;
  --slate-3: 240 243 245;
  --slate-4: 231 236 241;
  --slate-5: 225 228 232;
  --slate-6: 223 227 232;
  --slate-7: 213 218 222;
  --slate-8: 207 212 218;
  --slate-9: 145 154 158;
  --slate-10: 110 122 126;
  --slate-11: 93 104 109;
  --slate-12: 13 17 18;

  --blue-1: 252 253 254;
  --blue-2: 246 248 250;
  --blue-3: 233 243 246;
  --blue-4: 233 243 246;
  --blue-5: 233 243 246;
  --blue-6: 223 227 232;
  --blue-7: 213 218 222;
  --blue-8: 77 184 208;
  --blue-9: 8 145 168;
  --blue-10: 8 145 168;
  --blue-11: 8 145 168;
  --blue-12: 13 17 18;

  --ruby-1: 252 253 254;
  --ruby-2: 246 248 250;
  --ruby-3: 250 238 239;
  --ruby-4: 250 238 239;
  --ruby-5: 250 238 239;
  --ruby-6: 224 69 69;
  --ruby-7: 224 69 69;
  --ruby-8: 224 69 69;
  --ruby-9: 224 69 69;
  --ruby-10: 224 69 69;
  --ruby-11: 224 69 69;
  --ruby-12: 13 17 18;

  --amber-1: 252 253 254;
  --amber-2: 246 248 250;
  --amber-3: 250 246 234;
  --amber-4: 250 246 234;
  --amber-5: 250 246 234;
  --amber-6: 229 161 0;
  --amber-7: 229 161 0;
  --amber-8: 229 161 0;
  --amber-9: 229 161 0;
  --amber-10: 229 161 0;
  --amber-11: 229 161 0;
  --amber-12: 13 17 18;

  --teal-1: 252 253 254;
  --teal-2: 246 248 250;
  --teal-3: 235 247 240;
  --teal-4: 235 247 240;
  --teal-5: 235 247 240;
  --teal-6: 45 165 98;
  --teal-7: 45 165 98;
  --teal-8: 45 165 98;
  --teal-9: 45 165 98;
  --teal-10: 45 165 98;
  --teal-11: 45 165 98;
  --teal-12: 13 17 18;

  --background-color: 252 253 254;
  --surface-1: 252 253 254;
  --surface-2: 246 248 250;
  --surface-active: 246 248 250;
  --background-input-box: 13, 17, 18, 0.03;
  --text-blue: 13 17 18;
  --text-purple: 13 17 18;
  --text-amber: 13 17 18;
  --border-container: 231 236 241;
  --border-strong: 223 227 232;
  --border-weak: 231 236 241;
  --border-blue-strong: 8 145 168;
  --solid-1: 252 253 254;
  --solid-2: 246 248 250;
  --solid-3: 240 243 245;
  --solid-active: 246 248 250;
  --solid-amber: 250 246 234;
  --solid-blue: 233 243 246;
  --solid-blue-2: 252 253 254;
  --solid-red: 250 238 239;
  --solid-amber-button: 229 161 0;
  --card-color: 252 253 254;
  --button-color: 252 253 254;
  --label-background: 246 248 250;
  --label-border: 13, 17, 18, 0.04;
  --border-blue: 8, 145, 168, 0.5;
}

.dark {
  color-scheme: dark;

  --axis-primary: #4db8d0;
  --axis-primary-variant: #0891a8;
  --axis-bg-surface: #0d1112;
  --axis-bg-card: rgba(255, 255, 255, 0.05);
  --axis-text-primary: #fcfdfe;
  --axis-text-secondary: #919a9e;
  --axis-text-auxiliary: #919a9e;
  --axis-border-subtle: rgba(255, 255, 255, 0.08);
  --axis-border-hover: rgba(255, 255, 255, 0.13);
  --axis-border-default: rgba(255, 255, 255, 0.08);
  --axis-border-input: rgba(255, 255, 255, 0.13);
  --axis-border-aux: rgba(255, 255, 255, 0.1);
  --axis-primary-8: rgba(77, 184, 208, 0.08);
  --axis-primary-15: rgba(77, 184, 208, 0.15);

  --slate-1: 13 17 18;
  --slate-2: 25 29 30;
  --slate-3: 32 36 37;
  --slate-4: 37 41 42;
  --slate-5: 44 48 49;
  --slate-6: 61 65 65;
  --slate-7: 74 77 77;
  --slate-8: 110 122 126;
  --slate-9: 145 154 158;
  --slate-10: 145 154 158;
  --slate-11: 145 154 158;
  --slate-12: 252 253 254;

  --blue-1: 13 17 18;
  --blue-2: 25 29 30;
  --blue-3: 18 30 33;
  --blue-4: 18 30 33;
  --blue-5: 23 42 47;
  --blue-6: 23 42 47;
  --blue-7: 44 48 49;
  --blue-8: 8 145 168;
  --blue-9: 77 184 208;
  --blue-10: 77 184 208;
  --blue-11: 77 184 208;
  --blue-12: 252 253 254;

  --background-color: 13 17 18;
  --surface-1: 13 17 18;
  --surface-2: 25 29 30;
  --surface-active: 37 41 42;
  --background-input-box: 255, 255, 255, 0.05;
  --text-blue: 252 253 254;
  --text-purple: 252 253 254;
  --text-amber: 252 253 254;
  --border-container: 255, 255, 255, 0.08;
  --border-strong: 44 48 49;
  --border-weak: 32 36 37;
  --border-blue-strong: 77 184 208;
  --solid-1: 13 17 18;
  --solid-2: 25 29 30;
  --solid-3: 37 41 42;
  --solid-active: 44 48 49;
  --solid-amber: 37 41 42;
  --solid-blue: 18 30 33;
  --solid-blue-2: 25 29 30;
  --solid-red: 45 26 27;
  --solid-amber-button: 229 161 0;
  --card-color: 25 29 30;
  --button-color: 37 41 42;
  --label-background: 25 29 30;
  --label-border: 255, 255, 255, 0.08;
  --border-blue: 77, 184, 208, 0.5;
}

/* Compiled Tailwind utilities whose colors are not backed by CSS variables. */
[class~="bg-n-brand"],
[class~="checked:bg-n-brand"]:checked,
[class~="before:bg-n-brand"]::before,
[class~="after:bg-n-brand"]::after {
  background-color: var(--axis-primary) !important;
}

[class~="bg-n-brand/5"],
[class~="bg-n-brand/10"],
[class~="bg-n-brand/20"],
[class~="hover:bg-n-brand/10"]:hover,
[class~="hover:bg-n-brand/20"]:hover,
[class~="focus-visible:bg-n-brand/20"]:focus-visible {
  background-color: var(--axis-primary-8) !important;
}

[class~="hover:bg-n-brand/80"]:hover,
[class~="hover:bg-n-brand/90"]:hover,
[class~="hover:enabled:bg-n-brand/90"]:hover:enabled {
  background-color: var(--axis-primary) !important;
  opacity: 0.9;
}

[class~="text-n-brand"],
[class~="hover:text-n-brand"]:hover,
[class~="hover:enabled:text-n-brand"]:hover:enabled,
.group:hover [class~="group-hover:text-n-brand"] {
  color: var(--axis-primary) !important;
}

[class~="border-n-brand"],
[class~="checked:border-n-brand"]:checked,
[class~="focus:border-n-brand"]:focus,
[class~="focus-within:border-n-brand"]:focus-within {
  border-color: var(--axis-primary) !important;
}

[class~="outline-n-brand"],
[class~="focus:outline-n-brand"]:focus,
[class~="focus-within:outline-n-brand"]:focus-within,
[class~="focus-visible:outline-n-brand"]:focus-visible {
  outline-color: var(--axis-primary) !important;
}

[class~="ring-n-brand"],
[class~="focus:ring-n-brand"]:focus,
[class~="focus-within:ring-n-brand"]:focus-within,
[class~="focus-visible:ring-n-brand"]:focus-visible {
  --tw-ring-color: var(--axis-primary) !important;
}

.dark [class~="dark:bg-n-brand"],
.dark [class~="dark:checked:bg-n-brand"]:checked {
  background-color: var(--axis-primary) !important;
}

.dark [class~="dark:bg-n-brand/10"] {
  background-color: var(--axis-primary-8) !important;
}

.dark [class~="dark:text-n-brand"],
.dark [class~="dark:hover:text-n-brand"]:hover {
  color: var(--axis-primary) !important;
}

.dark [class~="dark:border-n-brand"],
.dark [class~="dark:focus:border-n-brand"]:focus {
  border-color: var(--axis-primary) !important;
}

.dark [class~="dark:outline-n-brand"],
.dark [class~="dark:focus:outline-n-brand"]:focus,
.dark [class~="dark:focus-within:outline-n-brand"]:focus-within {
  outline-color: var(--axis-primary) !important;
}

.dark [class~="dark:ring-n-brand"],
.dark [class~="dark:focus:ring-n-brand"]:focus,
.dark [class~="dark:focus-within:ring-n-brand"]:focus-within {
  --tw-ring-color: var(--axis-primary) !important;
}

/* Legacy Chatwoot utilities still used by a few screens. */
[class~="bg-woot-25"] {
  background-color: var(--axis-bg-card) !important;
}

[class~="bg-woot-50"],
[class~="bg-woot-75"],
[class~="bg-woot-100"] {
  background-color: var(--axis-primary-8) !important;
}

[class~="bg-woot-500"],
[class~="bg-woot-600"],
[class~="checked:bg-woot-500"]:checked {
  background-color: var(--axis-primary) !important;
}

[class~="hover:bg-woot-600"]:hover,
[class~="hover:bg-woot-700"]:hover {
  background-color: var(--axis-primary) !important;
  opacity: 0.9;
}

[class~="text-woot-400"],
[class~="text-woot-500"],
[class~="text-woot-600"],
[class~="text-woot-700"],
[class~="hover:text-woot-500"]:hover,
[class~="hover:text-woot-700"]:hover {
  color: var(--axis-primary) !important;
}

[class~="border-woot-500"],
[class~="focus:border-woot-500"]:focus {
  border-color: var(--axis-primary) !important;
}

[class~="ring-woot-500"],
[class~="focus:ring-woot-500"]:focus {
  --tw-ring-color: var(--axis-primary) !important;
}

[class~="outline-woot-500"],
[class~="focus-visible:outline-woot-500"]:focus-visible {
  outline-color: var(--axis-primary) !important;
}

/* Axis uses off-white/Onyx instead of pure white/black on branded controls. */
[class~="bg-n-brand"][class~="text-white"],
[class~="bg-woot-500"][class~="text-white"],
[class~="bg-woot-600"][class~="text-white"] {
  color: var(--axis-bg-surface) !important;
}

.dark [class~="bg-n-brand"][class~="text-white"],
.dark [class~="bg-woot-500"][class~="text-white"],
.dark [class~="bg-woot-600"][class~="text-white"] {
  color: var(--axis-bg-dark) !important;
}

/*
 * Login-only backdrop.
 * Uses the canonical Axis dark gradient stops and primary-color alpha tokens.
 */
html[data-axis-page="login"] body,
html[data-axis-page="login"] #app {
  min-height: 100%;
  background: var(--axis-bg-dark);
}

html[data-axis-page="login"] main[class~="min-h-screen"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0d1112 !important;
  background-image:
    radial-gradient(
      circle at 18% 14%,
      rgba(77, 184, 208, 0.2) 0,
      rgba(77, 184, 208, 0.08) 22%,
      transparent 48%
    ),
    radial-gradient(
      circle at 84% 88%,
      rgba(8, 145, 168, 0.24) 0,
      rgba(8, 145, 168, 0.08) 24%,
      transparent 52%
    ),
    linear-gradient(135deg, #0d1112 0%, #0a3d4a 52%, #0d1112 100%) !important;
  background-attachment: fixed;
}

html[data-axis-page="login"] main[class~="min-h-screen"] > section {
  position: relative;
  z-index: 1;
}

html[data-axis-page="login"] main[class~="min-h-screen"] > section:first-child h2,
html[data-axis-page="login"] main[class~="min-h-screen"] > section:first-child p {
  color: #fcfdfe !important;
}

/* Always use the inverse lockup over the dark login background. */
html[data-axis-page="login"] main[class~="min-h-screen"] img[class~="dark:hidden"] {
  display: none !important;
}

html[data-axis-page="login"] main[class~="min-h-screen"] img[class~="dark:block"] {
  display: block !important;
}

html[data-axis-page="login"] main[class~="min-h-screen"] > section[class~="bg-white"] {
  color-scheme: dark;

  /*
   * Keep the form card consistently dark even when Chatwoot's saved preference
   * is light. The field layer uses Axis white-5 over the Onyx card.
   */
  --axis-primary: #4db8d0;
  --axis-primary-variant: #0891a8;
  --axis-bg-surface: #0d1112;
  --axis-bg-card: rgba(255, 255, 255, 0.05);
  --axis-text-primary: #fcfdfe;
  --axis-text-secondary: #919a9e;
  --axis-text-tertiary: #919a9e;
  --axis-text-auxiliary: #919a9e;
  --axis-border-subtle: rgba(255, 255, 255, 0.08);
  --axis-border-hover: rgba(255, 255, 255, 0.13);
  --axis-border-default: rgba(255, 255, 255, 0.08);
  --axis-border-input: rgba(255, 255, 255, 0.13);

  --slate-1: 13 17 18;
  --slate-2: 25 29 30;
  --slate-3: 32 36 37;
  --slate-4: 37 41 42;
  --slate-5: 44 48 49;
  --slate-6: 61 65 65;
  --slate-7: 74 77 77;
  --slate-8: 110 122 126;
  --slate-9: 145 154 158;
  --slate-10: 145 154 158;
  --slate-11: 145 154 158;
  --slate-12: 252 253 254;

  --blue-1: 13 17 18;
  --blue-2: 25 29 30;
  --blue-3: 18 30 33;
  --blue-4: 18 30 33;
  --blue-5: 23 42 47;
  --blue-6: 23 42 47;
  --blue-7: 44 48 49;
  --blue-8: 8 145 168;
  --blue-9: 77 184 208;
  --blue-10: 77 184 208;
  --blue-11: 77 184 208;
  --blue-12: 252 253 254;

  --background-color: 13 17 18;
  --surface-1: 13 17 18;
  --surface-2: 25 29 30;
  --surface-active: 37 41 42;
  --background-input-box: 255, 255, 255, 0.05;
  --border-container: 255, 255, 255, 0.08;
  --border-strong: 44 48 49;
  --border-weak: 32 36 37;
  --border-blue-strong: 77 184 208;
  --solid-1: 13 17 18;
  --solid-2: 25 29 30;
  --solid-3: 37 41 42;
  --solid-active: 44 48 49;
  --card-color: 25 29 30;
  --button-color: 37 41 42;
  --alpha-1: 255, 255, 255, 0.08;
  --alpha-2: 255, 255, 255, 0.1;
  --alpha-3: 255, 255, 255, 0.13;
  --black-alpha-1: 255, 255, 255, 0.08;
  --black-alpha-2: 255, 255, 255, 0.05;
  --white-alpha: 255, 255, 255, 0.1;
  --border-blue: 77, 184, 208, 0.5;

  background-color: #0d1112 !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

html[data-axis-page="login"]
  main[class~="min-h-screen"]
  > section[class~="bg-white"]
  .text-link {
  color: #4db8d0 !important;
}

html[data-axis-page="login"]
  main[class~="min-h-screen"]
  > section[class~="bg-white"]
  [class~="bg-n-brand"][class~="text-white"] {
  color: #0d1112 !important;
}

::selection {
  background: var(--axis-primary-15);
  color: var(--axis-text-primary);
}