/* ══════════════════════════════════════════════════════════════
   WaTell theme - one accessible palette (2026-10)

   Loaded LAST on every page. It does not restyle components; it
   points the older token sets (style.css legacy, --ds-*, --adm-*)
   at one palette whose text/background pairs meet WCAG 2.2 AA:
   4.5:1 for text, 3:1 for field borders and focus rings.

   Two brand roles: --wt-brand fills buttons (white text 5.47:1) in
   both themes; --wt-accent is the accent used as TEXT, so in dark
   mode it switches to a bright teal while buttons stay deep teal.
   The bright #00B8A9 is the logo colour only - white text on it
   is 2.49:1.
   ══════════════════════════════════════════════════════════════ */

:root {
    --wt-ink: #0F172A;
    --wt-ink-2: #475569;
    --wt-ink-3: #5B6678;
    --wt-canvas: #F4F6F9;
    --wt-surface: #FFFFFF;
    --wt-surface-2: #F8FAFC;
    --wt-line: #E2E8F0;
    --wt-line-strong: #CBD5E1;
    --wt-field: #7D8796;
    --wt-placeholder: #6B7585;

    --wt-brand: #0F766E;
    --wt-brand-hover: #115E59;
    --wt-brand-soft: #E6F4F2;
    --wt-brand-soft-2: #CDEAE6;
    --wt-brand-ink: #0F5E57;
    --wt-brand-mark: #00B8A9;
    --wt-accent: #0F766E;
    --wt-accent-hover: #115E59;
    --wt-on-brand: #FFFFFF;

    --wt-ok: #047857;  --wt-ok-fill: #047857;  --wt-ok-bg: #ECFDF5;  --wt-ok-ink: #065F46;
    --wt-warn: #B45309; --wt-warn-bg: #FFFBEB; --wt-warn-ink: #92400E;
    --wt-bad: #B91C1C;  --wt-bad-fill: #DC2626; --wt-bad-fill-hover: #B91C1C; --wt-bad-bg: #FEF2F2; --wt-bad-ink: #991B1B;
    --wt-info: #1D4ED8; --wt-info-bg: #EFF6FF; --wt-info-ink: #1E40AF;
    --wt-neutral-bg: #F1F5F9; --wt-neutral-ink: #334155;

    --wt-tip-bg: #0F172A; --wt-tip-ink: #F8FAFC;
    /* App rail (shell.css): deep teal column, bright teal edge thread. */
    --wt-rail: #0B403B; --wt-rail-edge: #2DD4BF;
    --wt-rail-ink: rgba(255, 255, 255, 0.88); --wt-rail-muted: rgba(255, 255, 255, 0.62);
    --wt-rail-line: rgba(255, 255, 255, 0.14);
    --wt-focus: 0 0 0 3px rgba(15, 118, 110, 0.35);
    --wt-font: "Golos Text", "Noto Sans Armenian", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

    /* style.css legacy tokens */
    --font: var(--wt-font);
    --bg-primary: var(--wt-canvas);
    --text-primary: var(--wt-ink);
    --text-secondary: var(--wt-ink-2);
    --text-muted: var(--wt-ink-3);
    --accent-blue: var(--wt-accent);
    --accent-blue-hover: var(--wt-accent-hover);
    --accent-blue-light: var(--wt-brand-soft);
    --accent-blue-soft: var(--wt-brand-soft-2);
    --accent-green: var(--wt-ok);
    --accent-green-hover: var(--wt-ok-ink);
    --accent-green-light: var(--wt-ok-bg);
    --accent-green-soft: #D1FAE5;
    --success: var(--wt-ok);
    --error: var(--wt-bad);
    --warning: var(--wt-warn);
    --info: var(--wt-accent);
    --border: var(--wt-line-strong);
    --border-light: var(--wt-line);
    --border-focus: var(--wt-brand);
    --sidebar-accent: #2DD4BF;
    --brand-widget: var(--wt-brand-mark);

    /* dashboard-ui.css --ds-* tokens */
    --ds-bg-canvas: var(--wt-canvas);
    --ds-text: var(--wt-ink);
    --ds-text-soft: var(--wt-ink-2);
    --ds-text-muted: var(--wt-ink-3);
    --ds-accent: var(--wt-accent);
    --ds-accent-soft: var(--wt-brand-soft);
    --ds-accent-strong: var(--wt-brand-ink);
    --ds-success: var(--wt-ok);  --ds-success-soft: var(--wt-ok-bg);
    --ds-warning: var(--wt-warn); --ds-warning-soft: var(--wt-warn-bg);
    --ds-danger: var(--wt-bad);  --ds-danger-soft: var(--wt-bad-bg);
    --ds-info: var(--wt-info);   --ds-info-soft: var(--wt-info-bg);
    --ds-ring: var(--wt-focus);
}

/* Dark: text accents brighten, button fills keep the deep teal. */
body.dark-mode {
    --wt-ink: #E6EDF3;
    --wt-surface: #161B22; --wt-surface-2: #1C2128;
    --wt-line: #30363D; --wt-line-strong: #3D444D;
    --wt-tip-bg: #E6EDF3; --wt-tip-ink: #0F172A;
    --wt-rail: #0A2E2B;
    --wt-brand-soft: rgba(45, 212, 191, 0.14);
    --wt-brand-soft-2: rgba(45, 212, 191, 0.22);
    --wt-ok-bg: rgba(52, 211, 153, 0.14);
    --wt-warn-bg: rgba(251, 191, 36, 0.14);
    --wt-bad-bg: rgba(248, 113, 113, 0.14);
    --wt-info-bg: rgba(96, 165, 250, 0.14);
    --wt-neutral-bg: rgba(148, 163, 184, 0.14);
    --wt-ink-2: #B4BECC;
    --wt-ink-3: #9AA6B6;
    --wt-field: #6B7A90;
    --wt-placeholder: #8C97A8;
    --wt-accent: #2DD4BF;
    --wt-accent-hover: #5EEAD4;
    --wt-brand-ink: #5EEAD4;
    --wt-ok: #34D399; --wt-ok-ink: #6EE7B7;
    --wt-warn: #FBBF24; --wt-warn-ink: #FCD34D;
    --wt-bad: #F87171; --wt-bad-ink: #FCA5A5;
    --wt-info: #60A5FA; --wt-info-ink: #93C5FD;
    --wt-neutral-ink: #CBD5E1;
    --wt-focus: 0 0 0 3px rgba(45, 212, 191, 0.45);
    --text-muted: var(--wt-ink-3);
    --text-secondary: var(--wt-ink-2);
    --accent-blue: var(--wt-accent);
    --accent-blue-hover: var(--wt-accent-hover);
    --ds-text-muted: var(--wt-ink-3);
    --ds-text-soft: var(--wt-ink-2);
    --ds-accent: var(--wt-accent);
    --ds-accent-strong: var(--wt-brand-ink);
    --ds-success: var(--wt-ok);
    --ds-warning: var(--wt-warn);
    --ds-danger: var(--wt-bad);
    --ds-info: var(--wt-info);
    --ds-ring: var(--wt-focus);
}

@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --wt-ink: #E6EDF3;
        --wt-surface: #161B22; --wt-surface-2: #1C2128;
        --wt-line: #30363D; --wt-line-strong: #3D444D;
        --wt-tip-bg: #E6EDF3; --wt-tip-ink: #0F172A;
        --wt-rail: #0A2E2B;
        --wt-brand-soft: rgba(45, 212, 191, 0.14);
        --wt-brand-soft-2: rgba(45, 212, 191, 0.22);
        --wt-ok-bg: rgba(52, 211, 153, 0.14);
        --wt-warn-bg: rgba(251, 191, 36, 0.14);
        --wt-bad-bg: rgba(248, 113, 113, 0.14);
        --wt-info-bg: rgba(96, 165, 250, 0.14);
        --wt-neutral-bg: rgba(148, 163, 184, 0.14);
        --wt-ink-2: #B4BECC;
        --wt-ink-3: #9AA6B6;
        --wt-field: #6B7A90;
        --wt-placeholder: #8C97A8;
        --wt-accent: #2DD4BF;
        --wt-accent-hover: #5EEAD4;
        --wt-brand-ink: #5EEAD4;
        --wt-ok: #34D399; --wt-ok-ink: #6EE7B7;
        --wt-warn: #FBBF24; --wt-warn-ink: #FCD34D;
        --wt-bad: #F87171; --wt-bad-ink: #FCA5A5;
        --wt-info: #60A5FA; --wt-info-ink: #93C5FD;
        --wt-neutral-ink: #CBD5E1;
        --wt-focus: 0 0 0 3px rgba(45, 212, 191, 0.45);
        --text-muted: var(--wt-ink-3);
        --text-secondary: var(--wt-ink-2);
        --accent-blue: var(--wt-accent);
        --accent-blue-hover: var(--wt-accent-hover);
        --ds-text-muted: var(--wt-ink-3);
        --ds-text-soft: var(--wt-ink-2);
        --ds-accent: var(--wt-accent);
        --ds-accent-strong: var(--wt-brand-ink);
        --ds-success: var(--wt-ok);
        --ds-warning: var(--wt-warn);
        --ds-danger: var(--wt-bad);
        --ds-info: var(--wt-info);
        --ds-ring: var(--wt-focus);
    }
}

/* Superadmin (admin.css) - its primary was WhatsApp green (white text
   1.98:1); same brand teal as the rest of the product. */
[data-admin] {
    --adm-primary: var(--wt-brand);
    --adm-primary-strong: var(--wt-brand-hover);
    --adm-primary-soft: var(--wt-brand-soft);
    --adm-text-muted: #556178;
    --adm-warning: var(--wt-warn);
    --adm-warning-soft: #FEF3C7;
    --adm-info: var(--wt-info);
    --adm-danger: var(--wt-bad-fill);
    --adm-focus-ring: var(--wt-focus);
    font-family: var(--wt-font);
}

body {
    font-family: var(--wt-font);
}

/* ── Buttons: fills always deep teal / green / red with white text ── */
.btn-primary,
.ds-btn--primary,
.adm-btn--primary {
    background: var(--wt-brand);
    border-color: var(--wt-brand);
    color: var(--wt-on-brand);
}
.btn-primary:hover:not(:disabled),
.ds-btn--primary:hover,
.adm-btn--primary:hover:not(:disabled) {
    background: var(--wt-brand-hover);
    border-color: var(--wt-brand-hover);
    color: var(--wt-on-brand);
}
.btn-primary:active:not(:disabled) {
    background: #0B4F49;
}
.btn-success {
    background: var(--wt-ok-fill);
    color: #FFFFFF;
}
.btn-success:hover:not(:disabled) {
    background: #065F46;
}
.btn-danger,
.ds-btn--danger,
.adm-btn--danger {
    background: var(--wt-bad-fill);
    border-color: var(--wt-bad-fill);
    color: #FFFFFF;
}
.btn-danger:hover:not(:disabled),
.ds-btn--danger:hover,
.adm-btn--danger:hover:not(:disabled) {
    background: var(--wt-bad-fill-hover);
    border-color: var(--wt-bad-fill-hover);
}
.btn-secondary:hover:not(:disabled) {
    border-color: var(--wt-accent);
    color: var(--wt-accent);
}
.btn:focus-visible,
.ds-btn:focus-visible,
.adm-btn:focus-visible {
    outline: none;
    box-shadow: var(--wt-focus);
}

/* ── Badges: dark text on a light tint (all >= 6:1) ── */
.badge-success,
.ds-badge--success,
.adm-badge--success {
    background: var(--wt-ok-bg);
    color: var(--wt-ok-ink);
}
.badge-warning,
.ds-badge--warning,
.adm-badge--warning {
    background: var(--wt-warn-bg);
    color: var(--wt-warn-ink);
}
.badge-error,
.badge-danger,
.ds-badge--danger,
.adm-badge--danger {
    background: var(--wt-bad-bg);
    color: var(--wt-bad-ink);
}
.badge-info,
.ds-badge--accent {
    background: var(--wt-brand-soft);
    color: var(--wt-brand-ink);
}
.ds-badge--info,
.adm-badge--info {
    background: var(--wt-info-bg);
    color: var(--wt-info-ink);
}
.badge-muted,
.badge-secondary,
.ds-badge--neutral,
.adm-badge--neutral {
    background: var(--wt-neutral-bg);
    color: var(--wt-neutral-ink);
}
/* ── Fields: border >= 3:1, readable placeholder, teal focus ring ── */
.form-input, .form-select, .form-textarea,
.ds-input, .ds-select, .ds-textarea {
    border-color: var(--wt-field);
}
.form-input::placeholder, .form-textarea::placeholder,
.ds-input::placeholder, .ds-textarea::placeholder,
.rf-input::placeholder, .adm-field input::placeholder, .adm-field textarea::placeholder,
input::placeholder, textarea::placeholder {
    color: var(--wt-placeholder);
    opacity: 1;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
    border-color: var(--wt-brand);
    box-shadow: var(--wt-focus);
    outline: none;
}

/* ── Spots measured below AA on the live portal ── */
.chat-time-unread { color: var(--wt-ok); }
.chat-unread-badge,
.chat-item-unread {
    background: var(--wt-ok-fill);
    color: #FFFFFF;
}
.chat-filter-btn.active,
.chat-message.outgoing {
    background-color: var(--wt-brand);
    color: var(--wt-on-brand);
}
.status-away,
.status-offline { color: var(--wt-ink-3); }
.form-error,
.required,
.ds-field__error { color: var(--wt-bad); }
.alert-warning { color: var(--wt-warn-ink); }
.ds-page-head__kicker { color: var(--wt-ink-3); }

/* "Add channel" tiles: the dark-mode leak used to paint them white in
   light mode too; keep that look now that the leak is gone. The element
   selector outranks the rule integrations.js injects after this file;
   dark mode still wins through its !important rule in style.css. */
button.platform-add-btn { background: var(--wt-surface); }

/* ── Logo A: the bubble carries the colour, "WaTell" stays one colour ── */
.sidebar-brand span,
.auth-logo-text span,
.mv-brand span,
.adm-sidebar__brand-accent {
    color: inherit;
    font-weight: inherit;
    opacity: 1;
}
.sidebar-brand,
.auth-logo-text,
.mv-brand {
    letter-spacing: -0.02em;
}
.auth-logo > img {
    display: block;
    margin: 0 auto 12px;
}
.mv-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.adm-sidebar__brand img {
    border-radius: 0;
}