/* ==========================================================================
   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;

    /* --- Control ornament -------------------------------------------------
       A background image cannot take currentColor, so the whole chevron is
       a token and each palette supplies its own. One baked grey always
       loses on one of the two themes, and it is always dark that suffers. */
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23858d9b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

    /* --- 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;

        --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f7889' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
        --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;

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f7889' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --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.

   The same nominal size reads smaller in Persian than in Latin: the script
   carries more detail per glyph, the dots below the line need room, and a
   descender clipped by a tight line box is the first thing anyone notices.
   So the small end of the scale moves up a pixel, lines get more air, and
   the controls grow to match. This is not decoration; at 12px with a line
   box exactly one em tall, a "ی" loses its tail.
   -------------------------------------------------------------------------- */
:root[dir="rtl"] {
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;

    --leading-tight: 1.45;
    --leading-snug: 1.55;
    --leading-normal: 1.75;

    --control-height: 38px;
    --control-height-sm: 32px;
    --control-height-lg: 44px;
}