/* ==========================================================================
   Conversa design tokens
   One source of truth for colour, type, spacing, radius and elevation.
   Light is the base palette; dark redefines only the tokens that change,
   so contrast and hierarchy survive the switch instead of being inverted.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Brand ----------------------------------------------------------- */
    --color-primary: #3358d4;
    --color-primary-hover: #2a49b5;
    --color-primary-active: #233d99;
    --color-primary-soft: #eef2fe;
    --color-primary-soft-hover: #e2e9fd;
    --color-primary-border: #c3d0fa;
    --color-on-primary: #ffffff;

    --color-accent: #0f766e;
    --color-accent-soft: #e6f4f1;

    /* --- Surfaces -------------------------------------------------------- */
    --color-background: #f6f7f9;
    --color-surface: #ffffff;
    --color-surface-secondary: #f1f3f6;
    --color-surface-tertiary: #e9ecf1;
    --color-surface-inverse: #14171f;
    --color-overlay: rgba(17, 20, 26, 0.44);

    /* --- Borders --------------------------------------------------------- */
    --color-border: #e4e7ec;
    --color-border-strong: #d0d5dd;
    --color-border-focus: var(--color-primary);

    /* --- Text ------------------------------------------------------------ */
    --color-text-primary: #14171f;
    --color-text-secondary: #596273;
    --color-text-tertiary: #858d9b;
    --color-text-inverse: #f8fafc;
    --color-text-link: var(--color-primary);

    /* --- Semantic -------------------------------------------------------- */
    --color-success: #16794c;
    --color-success-soft: #e7f5ee;
    --color-success-border: #b9e0cd;

    --color-warning: #a75800;
    --color-warning-soft: #fdf2e3;
    --color-warning-border: #f2d9b0;

    --color-danger: #bc2f26;
    --color-danger-hover: #a3271f;
    --color-danger-soft: #fdeceb;
    --color-danger-border: #f5c6c2;

    --color-info: #1f5fbf;
    --color-info-soft: #eaf1fd;
    --color-info-border: #c3d8f7;

    /* --- Channel accents -------------------------------------------------
       Deliberately muted: a channel dot should identify, not decorate.     */
    --channel-telegram: #2b8fd4;
    --channel-whatsapp: #1f9d55;
    --channel-instagram: #c1387c;
    --channel-bale: #6d5ac4;
    --channel-rubika: #c07716;
    --channel-eitaa: #c85a1e;
    --channel-sms: #6b7280;
    --channel-email: #4257b2;
    --channel-livechat: #0f8a80;

    /* --- Tag palette ----------------------------------------------------- */
    --tag-slate: #64748b;
    --tag-blue: #2563eb;
    --tag-green: #16794c;
    --tag-amber: #a75800;
    --tag-red: #bc2f26;
    --tag-violet: #6d5ac4;
    --tag-teal: #0f766e;
    --tag-pink: #c1387c;

    /* --- Typography ------------------------------------------------------ */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-persian: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;

    --leading-tight: 1.25;
    --leading-snug: 1.4;
    --leading-normal: 1.55;
    --leading-relaxed: 1.7;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* --- Spacing scale --------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* --- Radius ---------------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* --- Elevation -------------------------------------------------------
       Three levels only. Anything that needs a fourth is over-designed.    */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.16), 0 4px 8px -4px rgba(16, 24, 40, 0.08);

    /* --- Motion ---------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 110ms;
    --duration-base: 170ms;
    --duration-slow: 260ms;

    /* --- Layout ---------------------------------------------------------- */
    --sidebar-width: 224px;
    --sidebar-width-collapsed: 60px;
    --list-width: 336px;
    --details-width: 312px;
    --topbar-height: 52px;
    --control-height: 34px;
    --control-height-sm: 28px;
    --control-height-lg: 40px;

    --z-dropdown: 200;
    --z-sticky: 300;
    --z-drawer: 400;
    --z-modal: 500;
    --z-toast: 600;
}

/* --------------------------------------------------------------------------
   Dark mode. Applies when the viewer chose dark, or when they are on the
   system default and their OS is dark. Surfaces step up in lightness as
   they come forward, which keeps depth readable without heavy shadows.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-primary: #6183f5;
        --color-primary-hover: #7593f7;
        --color-primary-active: #8ba5f8;
        --color-primary-soft: #1b2440;
        --color-primary-soft-hover: #212c4d;
        --color-primary-border: #2f3f6b;
        --color-on-primary: #0b0e14;

        --color-accent: #3cb5a5;
        --color-accent-soft: #12262a;

        --color-background: #0c0e13;
        --color-surface: #14171e;
        --color-surface-secondary: #1a1e27;
        --color-surface-tertiary: #222733;
        --color-surface-inverse: #e7eaef;
        --color-overlay: rgba(5, 7, 10, 0.66);

        --color-border: #262b36;
        --color-border-strong: #333a48;

        --color-text-primary: #e7eaef;
        --color-text-secondary: #9aa3b2;
        --color-text-tertiary: #6f7889;
        --color-text-inverse: #14171f;

        --color-success: #46b880;
        --color-success-soft: #10241b;
        --color-success-border: #1e4535;

        --color-warning: #dc9c3f;
        --color-warning-soft: #251b0d;
        --color-warning-border: #4a3617;

        --color-danger: #ef6b60;
        --color-danger-hover: #f3837a;
        --color-danger-soft: #2a1414;
        --color-danger-border: #512522;

        --color-info: #6b9df0;
        --color-info-soft: #131f33;
        --color-info-border: #26385a;

        --channel-telegram: #4aa6e4;
        --channel-whatsapp: #3ab971;
        --channel-instagram: #dc5a97;
        --channel-bale: #8f7fe0;
        --channel-rubika: #d99133;
        --channel-eitaa: #e0793f;
        --channel-sms: #8d95a3;
        --channel-email: #6b7ee0;
        --channel-livechat: #35a89d;

        --tag-slate: #94a3b8;
        --tag-blue: #6b9df0;
        --tag-green: #46b880;
        --tag-amber: #dc9c3f;
        --tag-red: #ef6b60;
        --tag-violet: #8f7fe0;
        --tag-teal: #3cb5a5;
        --tag-pink: #dc5a97;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
    }
}

/* Explicit choice always wins over the system preference. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #6183f5;
    --color-primary-hover: #7593f7;
    --color-primary-active: #8ba5f8;
    --color-primary-soft: #1b2440;
    --color-primary-soft-hover: #212c4d;
    --color-primary-border: #2f3f6b;
    --color-on-primary: #0b0e14;

    --color-accent: #3cb5a5;
    --color-accent-soft: #12262a;

    --color-background: #0c0e13;
    --color-surface: #14171e;
    --color-surface-secondary: #1a1e27;
    --color-surface-tertiary: #222733;
    --color-surface-inverse: #e7eaef;
    --color-overlay: rgba(5, 7, 10, 0.66);

    --color-border: #262b36;
    --color-border-strong: #333a48;

    --color-text-primary: #e7eaef;
    --color-text-secondary: #9aa3b2;
    --color-text-tertiary: #6f7889;
    --color-text-inverse: #14171f;

    --color-success: #46b880;
    --color-success-soft: #10241b;
    --color-success-border: #1e4535;

    --color-warning: #dc9c3f;
    --color-warning-soft: #251b0d;
    --color-warning-border: #4a3617;

    --color-danger: #ef6b60;
    --color-danger-hover: #f3837a;
    --color-danger-soft: #2a1414;
    --color-danger-border: #512522;

    --color-info: #6b9df0;
    --color-info-soft: #131f33;
    --color-info-border: #26385a;

    --channel-telegram: #4aa6e4;
    --channel-whatsapp: #3ab971;
    --channel-instagram: #dc5a97;
    --channel-bale: #8f7fe0;
    --channel-rubika: #d99133;
    --channel-eitaa: #e0793f;
    --channel-sms: #8d95a3;
    --channel-email: #6b7ee0;
    --channel-livechat: #35a89d;

    --tag-slate: #94a3b8;
    --tag-blue: #6b9df0;
    --tag-green: #46b880;
    --tag-amber: #dc9c3f;
    --tag-red: #ef6b60;
    --tag-violet: #8f7fe0;
    --tag-teal: #3cb5a5;
    --tag-pink: #dc5a97;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
}

/* Persian interfaces get a slightly larger base size: the script needs
   more vertical room than Latin at the same nominal size. */
:root[dir="rtl"] {
    --text-base: 15px;
    --text-sm: 14px;
    --leading-normal: 1.7;
}