/*
 * Central application and public-site theme authority.
 *
 * Every theme follows the same contract: a stable base color carries
 * navigation and feature identity, while one accent color supplies small
 * emphasis rails, focus details, and marketing highlights. Component files
 * consume semantic --color-* variables and do not choose theme colors.
 */

:root {
    --palette-modern-base: #145fad;
    --palette-modern-base-hover: #104f91;
    --palette-modern-base-active: #0d4f86;
    --palette-modern-base-soft: #eaf4ff;
    --palette-modern-base-border: #b8d7f2;
    --palette-modern-accent: #1e90ff;
    --palette-modern-accent-hover: #1877d8;
    --palette-modern-accent-border: #a5d3ff;

    --palette-boutique-base: #082d50;
    --palette-boutique-base-hover: #174e7d;
    --palette-boutique-base-active: #061f38;
    --palette-boutique-base-soft: #edf2f7;
    --palette-boutique-base-border: #b8c8d7;
    --palette-boutique-accent: #ce921e;
    --palette-boutique-accent-hover: #b8790d;
    --palette-boutique-accent-active: #9a670b;
    --palette-boutique-accent-soft: #fff6df;
    --palette-boutique-accent-border: #ead19b;

    --palette-cleanline-base: #0b4f55;
    --palette-cleanline-base-hover: #083f44;
    --palette-cleanline-base-active: #06383c;
    --palette-cleanline-base-soft: #e5f1f1;
    --palette-cleanline-base-border: #afd1cf;
    --palette-cleanline-accent: #0b7f83;
    --palette-cleanline-accent-hover: #096d70;
    --palette-cleanline-accent-active: #07595c;
    --palette-cleanline-accent-soft: #e3f6f4;
    --palette-cleanline-accent-border: #a8dcd7;

    --palette-brand-base: #101c2e;
    --palette-brand-base-hover: #1a304c;
    --palette-brand-base-active: #0a1320;
    --palette-brand-base-soft: #eaf4fe;
    --palette-brand-base-border: #b9cee5;
    --palette-brand-primary: #0e86f6;
    --palette-brand-primary-hover: #0875dd;
    --palette-brand-primary-active: #0966bb;
    --palette-brand-primary-soft: #eaf4fe;
    --palette-brand-accent: #f4b925;
    --palette-brand-accent-hover: #dda314;
    --palette-brand-accent-active: #b98208;
    --palette-brand-accent-soft: #fff7df;
    --palette-brand-accent-border: #f2d077;
}

:root {
    /* Communication surfaces distinguish collections, records, and inputs.
       Direction and call status retain their independent semantic palettes. */
    --communication-collection-bg: color-mix(in srgb, var(--color-theme-base) 3%, var(--color-surface));
    --communication-record-bg: var(--color-surface);
    --communication-input-bg: var(--color-surface);
    --communication-row-stripe: color-mix(in srgb, var(--color-theme-base) 4%, var(--color-surface));
    --communication-row-hover: color-mix(in srgb, var(--color-theme-base) 7%, var(--color-surface));
    --communication-record-selected: color-mix(in srgb, #dcecff 75%, var(--color-surface));
    --communication-selection-ink: #236fb5;
    /* Communication identity stays colorful even in the restrained Brand theme.
       Direction and result badges keep their own independent meaning. */
    --communication-summary-call-ink: color-mix(in srgb, #1879ca 88%, var(--color-theme-base));
    --communication-summary-text-ink: color-mix(in srgb, #8052c7 90%, var(--color-theme-base));
    --communication-voicemail-ink: color-mix(in srgb, #625488 65%, var(--color-theme-base));
    --communication-voicemail-soft: color-mix(in srgb, var(--communication-voicemail-ink) 9%, var(--color-surface));
}

html.app-theme-modern,
html.app-theme-boutique,
html.app-theme-cleanline,
html.app-theme-brand {
    --color-feature-calls-soft: #eaf4fe;
    --color-feature-texts: #64459b;
    --color-feature-texts-soft: #f1edff;
    --color-feature-texts-border: #d1c4ee;
    color-scheme: light;
    --surface-drawer-bg: var(--color-surface-muted);

    --color-theme-accent-soft-text: var(--color-theme-base);

    --color-brand: var(--color-theme-base);
    --color-brand-hover: var(--color-theme-base-hover);
    --color-brand-active: var(--color-theme-base-active);
    --color-brand-soft: var(--color-theme-base-soft);
    --color-brand-text: var(--color-theme-base-text);

    --color-feature-calls: var(--color-theme-base);
    --color-feature-calls-soft: var(--color-theme-base-soft);
    --color-feature-calls-border: var(--color-theme-base-border);
    --color-feature-calls-text: var(--color-theme-base-text);
    --color-feature-contacts: var(--color-theme-base);
    --color-feature-contacts-soft: var(--color-theme-base-soft);
    --color-feature-contacts-border: var(--color-theme-base-border);
    --color-feature-contacts-text: var(--color-theme-base-text);
    --color-feature-texts: var(--color-theme-base);
    --color-feature-texts-soft: var(--color-theme-base-soft);
    --color-feature-texts-border: var(--color-theme-base-border);
    --color-feature-texts-text: var(--color-theme-base-text);
    --color-feature-summary: var(--color-theme-base);
    --color-feature-summary-soft: var(--color-theme-base-soft);
    --color-feature-summary-text: var(--color-theme-base-text);
    --color-feature-settings: var(--color-theme-base);
    --color-feature-settings-soft: var(--color-theme-base-soft);
    --color-feature-settings-text: var(--color-theme-base-text);

    --color-marketing-primary: var(--color-theme-base);
    --color-marketing-primary-hover: var(--color-theme-base-hover);
    --color-marketing-primary-active: var(--color-theme-base-active);
    --color-marketing-primary-soft: var(--color-theme-base-soft);
    --color-marketing-secondary: var(--color-theme-accent);
    --color-marketing-secondary-soft: var(--color-theme-accent-soft);
    --color-marketing-dark: var(--color-theme-base);

    --input-focus-border: var(--color-theme-accent);
    --input-focus-ring: color-mix(in srgb, var(--color-theme-accent) 18%, transparent);
    --theme-emphasis-border: color-mix(in srgb, var(--color-theme-accent) 52%, transparent);
    --theme-emphasis-background: linear-gradient(
        135deg,
        var(--color-theme-base-active) 0%,
        var(--color-theme-base) 100%
    );
    --theme-emphasis-color: var(--color-theme-base-text);
    --theme-emphasis-shadow: 0 2px 7px color-mix(in srgb, var(--color-theme-base) 22%, transparent);
}

html.app-theme-modern {
    --color-feature-calls-soft: #eaf4ff;
    --color-feature-texts: #68439b;
    --color-feature-texts-soft: #f3eeff;
    --color-feature-texts-border: #d5c5ed;
    --color-theme-base: var(--palette-modern-base);
    --color-theme-base-hover: var(--palette-modern-base-hover);
    --color-theme-base-active: var(--palette-modern-base-active);
    --color-theme-base-soft: var(--palette-modern-base-soft);
    --color-theme-base-border: var(--palette-modern-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-modern-accent);
    --color-theme-accent-hover: var(--palette-modern-accent-hover);
    --color-theme-accent-active: var(--palette-modern-base);
    --color-theme-accent-soft: var(--palette-modern-base-soft);
    --color-theme-accent-border: var(--palette-modern-accent-border);
    --color-theme-accent-text: #ffffff;

    --color-bg: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f8fafc;
    --color-surface-elevated: #ffffff;
    --color-text: #1f2937;
    --color-text-muted: #4b5563;
    --color-text-subtle: #6b7280;
    --color-border: #d7dee8;
    --color-border-muted: #e8edf3;
    --color-border-strong: #b8c2cf;

    --table-header-bg: #eef4ff;
    --table-header-text: #2b436c;
    --table-row-odd: #ffffff;
    --table-row-even: #f8fafc;
    --table-row-hover: #f2f6fb;
    --button-bg: #f3f4f6;
    --button-text: #374151;
    --button-border: #d1d5db;
    --button-hover-bg: #e5e7eb;
    --button-hover-text: #111827;
    --button-hover-border: #c4ccd6;
    --input-bg: #ffffff;
    --input-placeholder: #9ca3af;
    --scrollbar-thumb: rgba(51, 65, 85, 0.26);
    --scrollbar-thumb-hover: rgba(51, 65, 85, 0.38);
    --scrollbar-thumb-active: rgba(51, 65, 85, 0.48);

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 14px 34px rgba(16, 24, 40, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(16, 24, 40, 0.18);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.07);
    --shadow-card-hover: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.10);
    --surface-panel-border: rgba(146, 174, 214, 0.26);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(216, 232, 255, 0.72), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 255, 255, 0.58);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.92);
    --surface-panel-soft-control-bg: rgba(255, 255, 255, 0.76);
    --shadow-panel: 0 14px 34px rgba(16, 24, 40, 0.18);
    --shadow-modal: 0 18px 46px rgba(15, 23, 42, 0.24);
    --color-call-active: #0f766e;
    --color-call-active-soft: #e6fffb;
    --color-call-active-border: #99f6e4;
    --shadow-call-active: rgba(15, 118, 110, 0.30);
    --color-call-ringing: #d97706;
    --color-call-ringing-soft: #fff7ed;
    --color-call-ringing-border: #fdba74;
    --shadow-call-ringing: rgba(217, 119, 6, 0.34);
    --overlay-backdrop: rgba(15, 23, 42, 0.42);
}

html.app-theme-boutique {
    --color-feature-calls-soft: #edf2f7;
    --color-feature-texts: #765078;
    --color-feature-texts-soft: #f4eef5;
    --color-feature-texts-border: #d9c7dc;
    --color-theme-base: var(--palette-boutique-base);
    --color-theme-base-hover: var(--palette-boutique-base-hover);
    --color-theme-base-active: var(--palette-boutique-base-active);
    --color-theme-base-soft: var(--palette-boutique-base-soft);
    --color-theme-base-border: var(--palette-boutique-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-boutique-accent);
    --color-theme-accent-hover: var(--palette-boutique-accent-hover);
    --color-theme-accent-active: var(--palette-boutique-accent-active);
    --color-theme-accent-soft: var(--palette-boutique-accent-soft);
    --color-theme-accent-border: var(--palette-boutique-accent-border);
    --color-theme-accent-text: var(--palette-boutique-base);

    --color-bg: #f4eee6;
    --color-surface: #fffdf9;
    --color-surface-muted: #f8f1e8;
    --color-surface-elevated: #fffefa;
    --color-text: #102f4d;
    --color-text-muted: #5f6470;
    --color-text-subtle: #756f68;
    --color-border: #dacbbb;
    --color-border-muted: #eadfd3;
    --color-border-strong: #bda98f;

    --table-header-bg: #efe3d4;
    --table-header-text: #173b5b;
    --table-row-odd: #fffdf9;
    --table-row-even: #faf4ec;
    --table-row-hover: #f6eadb;
    --button-bg: #f4eadf;
    --button-text: #173b5b;
    --button-border: #d7c6b4;
    --button-hover-bg: #eadbc9;
    --button-hover-text: #082d50;
    --button-hover-border: #c4ae96;
    --input-bg: #fffefa;
    --input-placeholder: #938a80;
    --scrollbar-thumb: rgba(8, 45, 80, 0.24);
    --scrollbar-thumb-hover: rgba(8, 45, 80, 0.36);
    --scrollbar-thumb-active: rgba(8, 45, 80, 0.46);

    --shadow-sm: 0 1px 2px rgba(58, 39, 22, 0.07);
    --shadow-md: 0 6px 18px rgba(58, 39, 22, 0.11);
    --shadow-lg: 0 14px 34px rgba(8, 45, 80, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(8, 45, 80, 0.16);
    --shadow-card: 0 1px 2px rgba(58, 39, 22, 0.06), 0 8px 22px rgba(8, 45, 80, 0.08);
    --shadow-card-hover: 0 1px 2px rgba(58, 39, 22, 0.07), 0 12px 28px rgba(8, 45, 80, 0.12);
    --surface-panel-border: rgba(189, 169, 143, 0.4);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(244, 222, 190, 0.72), transparent 44%),
        linear-gradient(180deg, rgba(255, 254, 250, 0.99) 0%, rgba(248, 241, 232, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 253, 249, 0.68);
    --surface-panel-control-bg: rgba(255, 254, 250, 0.94);
    --surface-panel-soft-control-bg: rgba(255, 253, 249, 0.8);
    --shadow-panel: 0 14px 34px rgba(8, 45, 80, 0.17);
    --shadow-modal: 0 18px 46px rgba(8, 45, 80, 0.22);
    --color-call-active: #1f65b7;
    --color-call-active-soft: #e9f1fb;
    --color-call-active-border: #aac8e8;
    --shadow-call-active: rgba(31, 101, 183, 0.30);
    --color-call-ringing: #c2413b;
    --color-call-ringing-soft: #fff0ef;
    --color-call-ringing-border: #e7a5a1;
    --shadow-call-ringing: rgba(194, 65, 59, 0.30);
    --overlay-backdrop: rgba(8, 45, 80, 0.42);
}

html.app-theme-cleanline {
    --color-feature-calls-soft: #e5f3f2;
    --color-feature-texts: #625b88;
    --color-feature-texts-soft: #f0eff8;
    --color-feature-texts-border: #cfcae4;
    --color-theme-base: var(--palette-cleanline-base);
    --color-theme-base-hover: var(--palette-cleanline-base-hover);
    --color-theme-base-active: var(--palette-cleanline-base-active);
    --color-theme-base-soft: var(--palette-cleanline-base-soft);
    --color-theme-base-border: var(--palette-cleanline-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-cleanline-accent);
    --color-theme-accent-hover: var(--palette-cleanline-accent-hover);
    --color-theme-accent-active: var(--palette-cleanline-accent-active);
    --color-theme-accent-soft: var(--palette-cleanline-accent-soft);
    --color-theme-accent-border: var(--palette-cleanline-accent-border);
    --color-theme-accent-text: #ffffff;

    --color-bg: #f1f8f8;
    --color-surface: #fbfefe;
    --color-surface-muted: #f1f9fa;
    --color-surface-elevated: #ffffff;
    --color-text: #123247;
    --color-text-muted: #526b79;
    --color-text-subtle: #718590;
    --color-border: #c9dde1;
    --color-border-muted: #e0edef;
    --color-border-strong: #9dbdc3;

    --table-header-bg: #e3f1f3;
    --table-header-text: #21495d;
    --table-row-odd: #fbfefe;
    --table-row-even: #f3fafa;
    --table-row-hover: #e8f5f6;
    --button-bg: #e8f3f5;
    --button-text: #21495d;
    --button-border: #c4dade;
    --button-hover-bg: #d9ecef;
    --button-hover-text: #123247;
    --button-hover-border: #a8c9cf;
    --input-bg: #ffffff;
    --input-placeholder: #82949c;
    --scrollbar-thumb: rgba(18, 50, 71, 0.22);
    --scrollbar-thumb-hover: rgba(18, 50, 71, 0.34);
    --scrollbar-thumb-active: rgba(18, 50, 71, 0.44);

    --surface-panel-border: rgba(157, 189, 195, 0.46);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(196, 237, 239, 0.76), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(241, 249, 250, 0.99) 100%);
    --surface-panel-field-bg: rgba(251, 254, 254, 0.72);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.94);
    --surface-panel-soft-control-bg: rgba(251, 254, 254, 0.82);
    --shadow-panel: 0 14px 34px rgba(18, 50, 71, 0.15);
    --shadow-modal: 0 18px 46px rgba(18, 50, 71, 0.21);
    --color-call-active: #0b7f83;
    --color-call-active-soft: #def3f4;
    --color-call-active-border: #99d1d6;
    --shadow-call-active: rgba(11, 127, 131, 0.28);
    --color-call-ringing: #c5523f;
    --color-call-ringing-soft: #fff0ed;
    --color-call-ringing-border: #e9aaa0;
    --shadow-call-ringing: rgba(197, 82, 63, 0.28);
    --overlay-backdrop: rgba(18, 50, 71, 0.40);
}

html.app-theme-brand {
    --color-theme-base: var(--palette-brand-base);
    --color-theme-base-hover: var(--palette-brand-base-hover);
    --color-theme-base-active: var(--palette-brand-base-active);
    --color-theme-base-soft: var(--palette-brand-base-soft);
    --color-theme-base-border: var(--palette-brand-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-brand-accent);
    --color-theme-accent-hover: var(--palette-brand-accent-hover);
    --color-theme-accent-active: var(--palette-brand-accent-active);
    --color-theme-accent-soft: var(--palette-brand-accent-soft);
    --color-theme-accent-border: var(--palette-brand-accent-border);
    --color-theme-accent-text: var(--palette-brand-base);

    /* Brand Preview separates structural chrome from primary actions. */
    --color-brand: var(--palette-brand-primary);
    --color-brand-hover: var(--palette-brand-primary-hover);
    --color-brand-active: var(--palette-brand-primary-active);
    --color-brand-soft: var(--palette-brand-primary-soft);
    --color-brand-text: #ffffff;
    --color-marketing-primary: var(--palette-brand-primary);
    --color-marketing-primary-hover: var(--palette-brand-primary-hover);
    --color-marketing-primary-active: var(--palette-brand-primary-active);
    --color-marketing-primary-soft: var(--palette-brand-primary-soft);
    --input-focus-border: var(--palette-brand-primary);
    --input-focus-ring: color-mix(in srgb, var(--palette-brand-primary) 20%, transparent);

    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f5f9;
    --color-surface-elevated: #ffffff;
    --color-text: #121e30;
    --color-text-muted: #536176;
    --color-text-subtle: #718096;
    --color-border: #d8e2ec;
    --color-border-muted: #e8eef4;
    --color-border-strong: #b7c7d7;

    --table-header-bg: #eaf4fe;
    --table-header-text: #162a44;
    --table-row-odd: #ffffff;
    --table-row-even: #f8fafc;
    --table-row-hover: #eef6fe;
    --button-bg: #edf4fb;
    --button-text: #172b45;
    --button-border: #cfdeec;
    --button-hover-bg: #deebf7;
    --button-hover-text: #101c2e;
    --button-hover-border: #b8cce0;
    --input-bg: #ffffff;
    --input-placeholder: #8491a3;
    --scrollbar-thumb: rgba(16, 28, 46, 0.24);
    --scrollbar-thumb-hover: rgba(16, 28, 46, 0.36);
    --scrollbar-thumb-active: rgba(16, 28, 46, 0.46);

    --shadow-sm: 0 1px 2px rgba(16, 28, 46, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 28, 46, 0.10);
    --shadow-lg: 0 14px 34px rgba(16, 28, 46, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(16, 28, 46, 0.18);
    --shadow-card: 0 1px 2px rgba(16, 28, 46, 0.05), 0 8px 22px rgba(16, 28, 46, 0.07);
    --shadow-card-hover: 0 1px 2px rgba(16, 28, 46, 0.06), 0 12px 28px rgba(16, 28, 46, 0.10);
    --surface-panel-border: rgba(142, 171, 203, 0.34);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(186, 220, 252, 0.68), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 255, 255, 0.64);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.94);
    --surface-panel-soft-control-bg: rgba(248, 250, 252, 0.84);
    --shadow-panel: 0 14px 34px rgba(16, 28, 46, 0.18);
    --shadow-modal: 0 18px 46px rgba(16, 28, 46, 0.24);
    --color-call-active: #0875dd;
    --color-call-active-soft: #eaf4fe;
    --color-call-active-border: #9cccf8;
    --shadow-call-active: rgba(14, 134, 246, 0.30);
    --color-call-ringing: #c2413b;
    --color-call-ringing-soft: #fff0ef;
    --color-call-ringing-border: #e7a5a1;
    --shadow-call-ringing: rgba(194, 65, 59, 0.30);
    --overlay-backdrop: rgba(16, 28, 46, 0.44);
}