/* ============================================================
   Varta CRM — Design Tokens
   Single source of truth for all colours, spacing, radius,
   shadows and z-indices. Every component references these.
   ============================================================ */

:root {
    /* ── Typography ── */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* ── Core colour palette (Forest Green) ── */
    --color-primary:                  #004227; /* Forest Green */
    --color-on-primary:               #ffffff;
    --color-primary-container:        #e8f5e0; /* Light green */
    --color-on-primary-container:     #004227;
    --color-primary-fixed:            #C0FFA5; /* Lime Green */
    --color-primary-fixed-dim:        #9ef087;
    --color-on-primary-fixed:         #001a0e;
    --color-on-primary-fixed-variant: #00351e;
    --color-inverse-primary:          #6ad05a;

    --color-secondary:                #1a6b48; /* Mid Forest Green */
    --color-on-secondary:             #ffffff;
    --color-secondary-container:      #C0FFA5; /* Lime Green */
    --color-on-secondary-container:   #004227;
    --color-secondary-fixed:          #C0FFA5;
    --color-secondary-fixed-dim:      #9ef087;
    --color-on-secondary-fixed:       #001a0e;
    --color-on-secondary-fixed-variant: #004227;

    --color-tertiary:                 #7c3aed; /* Violet-600 */
    --color-on-tertiary:              #ffffff;
    --color-tertiary-container:       #f5f3ff; /* Violet-50 */
    --color-on-tertiary-container:    #5b21b6; /* Violet-800 */
    --color-tertiary-fixed:           #ede9fe; /* Violet-100 */
    --color-tertiary-fixed-dim:       #ddd6fe; /* Violet-200 */
    --color-on-tertiary-fixed:        #4c1d95; /* Violet-900 */
    --color-on-tertiary-fixed-variant:#6d28d9; /* Violet-700 */

    --color-error:                    #ef4444; /* Red-500 */
    --color-on-error:                 #ffffff;
    --color-error-container:          #fee2e2; /* Red-100 */
    --color-on-error-container:       #991b1b; /* Red-800 */

    /* ── Surface Neutrals (Slate scale) ── */
    --color-background:               #f8fafc; /* Slate-50 */
    --color-on-background:            #0f172a; /* Slate-900 */
    --color-surface:                  #ffffff;
    --color-on-surface:               #0f172a; /* Slate-900 */
    --color-surface-variant:          #f1f5f9; /* Slate-100 */
    --color-on-surface-variant:       #475569; /* Slate-600 */
    --color-surface-bright:           #ffffff;
    --color-surface-dim:              #e2e8f0; /* Slate-200 */
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:    #f8fafc; /* Slate-50 */
    --color-surface-container:        #f1f5f9; /* Slate-100 */
    --color-surface-container-high:   #e2e8f0; /* Slate-200 */
    --color-surface-container-highest:#cbd5e1; /* Slate-300 */
    --color-surface-tint:             #004227;
    --color-inverse-surface:          #1e293b; /* Slate-800 */
    --color-inverse-on-surface:       #f8fafc;

    --color-outline:                  #64748b; /* Slate-500 */
    --color-outline-variant:          #e2e8f0; /* Slate-200 */

    /* ── Status badge tokens ── */
    --badge-hot-bg:       #fee2e2; --badge-hot-text:       #991b1b;
    --badge-warm-bg:      #f5f3ff; --badge-warm-text:      #5b21b6;
    --badge-new-bg:       #d1fae5; --badge-new-text:       #065f46;
    --badge-contacted-bg: #e0e7ff; --badge-contacted-text: #1e1b4b;
    --badge-converted-bg: #ccfbf1; --badge-converted-text: #115e59;
    --badge-closed-bg:    #f1f5f9; --badge-closed-text:    #475569;
    --badge-pending-bg:   #e2e8f0; --badge-pending-text:   #475569;
    --badge-approved-bg:  #d1fae5; --badge-approved-text:  #065f46;
    --badge-sent-bg:      #e0e7ff; --badge-sent-text:      #1e1b4b;
    --badge-whatsapp-bg:  #dcfce7; --badge-whatsapp-text:  #15803d;
    --badge-profile-created-bg:   #f5f3ff; --badge-profile-created-text: #5b21b6;

    /* ── Spacing scale ── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;

    /* ── Modern border radius ── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-full: 9999px;

    /* ── Modern Soft Shadows ── */
    --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.1), 0 1px 2px -1px rgba(15, 23, 42, 0.1);
    --shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
    --shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
    --shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);

    /* ── Layout ── */
    --sidebar-width:          240px;
    --sidebar-collapsed-width: 68px;
    --header-height:           64px;
    --transition-speed:        0.2s;

    /* ── Z-index ladder ── */
    --z-dropdown:  900;
    --z-header:    940;
    --z-sidebar:   950;
    --z-modal:     9000;
    --z-toast:     9999;

    /* ── Icon chip colour palette (used in stat cards, dashboard, badges) ── */
    --color-icon-indigo-bg:  #e0e7ff; --color-icon-indigo-fg:  #4f46e5;
    --color-icon-green-bg:   #dcfce7; --color-icon-green-fg:   #16a34a;
    --color-icon-blue-bg:    #dbeafe; --color-icon-blue-fg:    #2563eb;
    --color-icon-teal-bg:    #d1fae5; --color-icon-teal-fg:    #059669;
    --color-icon-amber-bg:   #fef3c7; --color-icon-amber-fg:   #d97706;
    --color-icon-red-bg:     #fee2e2; --color-icon-red-fg:     #dc2626;
    --color-icon-purple-bg:  #f3e8ff; --color-icon-purple-fg:  #9333ea;
    --color-icon-orange-bg:  #ffedd5; --color-icon-orange-fg:  #ea580c;
    --color-icon-pink-bg:    #fce7f3; --color-icon-pink-fg:    #db2777;
    --color-icon-yellow-bg:  #fef9c3; --color-icon-yellow-fg:  #ca8a04;
    --color-icon-cyan-bg:    #cffafe; --color-icon-cyan-fg:    #0891b2;

    /* ── Brand colours ── */
    --color-brand-whatsapp:  #25D366;
    --color-brand-meta:      #1877F2;
    --color-brand-ivr:       #f59e0b;

    /* ── Typography scale ── */
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-md:   1rem;
    --font-size-lg:   1.125rem;

    /* ── Additional status badge tokens (call log, webhook events) ── */
    --badge-inbound-bg:      #dcfce7; --badge-inbound-text:      #15803d;
    --badge-outbound-bg:     #dbeafe; --badge-outbound-text:     #1d4ed8;
    --badge-answered-bg:     #dcfce7; --badge-answered-text:     #15803d;
    --badge-missed-bg:       #fee2e2; --badge-missed-text:       #b91c1c;
    --badge-busy-bg:         #fef9c3; --badge-busy-text:         #a16207;
    --badge-no-answer-bg:    #fef3c7; --badge-no-answer-text:    #b45309;
    --badge-active-bg:       #dbeafe; --badge-active-text:       #1d4ed8;
    --badge-source-meta-bg:  #dbeafe; --badge-source-meta-text:  #1d4ed8;
    --badge-source-wa-bg:    #dcfce7; --badge-source-wa-text:    #15803d;
    --badge-source-ivr-bg:   #fef3c7; --badge-source-ivr-text:   #b45309;
    --badge-duplicate-bg:    #f3e8ff; --badge-duplicate-text:    #6d28d9;
    --badge-failed-bg:       #fee2e2; --badge-failed-text:       #b91c1c;
    --badge-rejected-bg:     #fee2e2; --badge-rejected-text:     #b91c1c;
    --badge-normalizing-bg:  #dbeafe; --badge-normalizing-text:  #1d4ed8;
    --badge-normalized-bg:   #dcfce7; --badge-normalized-text:   #15803d;

    /* ── Legacy variable aliases ── */
    --text-primary:   var(--color-on-surface);
    --text-secondary: var(--color-on-surface-variant);
    --surface-color:  var(--color-surface-container-lowest);
    --border-color:   var(--color-outline-variant);
    --primary-color:  var(--color-primary);
    --primary-accent: var(--color-primary);
    --font-heading:   var(--font-body);
    --bg-color:       var(--color-surface-container-low);
    --text-dark:      var(--color-on-surface);
    --primary-hover:  var(--color-primary);

    /* ── Chat Theme Tokens ── */
    --color-background-chat:          #efeae2;
    --bg-image-chat:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><circle cx='10' cy='10' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='40' cy='10' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='70' cy='10' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='25' cy='25' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='55' cy='25' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='10' cy='40' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='40' cy='40' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='70' cy='40' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='25' cy='55' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='55' cy='55' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='10' cy='70' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='40' cy='70' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='70' cy='70' r='1.2' fill='%23c9bfb5' opacity='0.55'/></svg>");
    --color-chat-bubble-inbound:      #ffffff;
    --color-chat-text-inbound:        #111b21;
    --color-chat-time-inbound:        #8696a0;
    --color-chat-bubble-outbound:     #d9fdd3;
    --color-chat-text-outbound:       #111b21;
    --color-chat-time-outbound:       #667781;
}

/* ============================================================
   DARK MODE TOKEN OVERRIDES
   Automatically applied when document root has [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
    /* ── Core colour palette overrides ── */
    --color-primary:                  #6ad05a; /* Lime-400 for dark bg */
    --color-on-primary:               #001a0e;
    --color-primary-container:        #003520; /* Deep forest */
    --color-on-primary-container:     #C0FFA5; /* Lime Green */
    --color-primary-fixed:            #003520;
    --color-primary-fixed-dim:        #004227;
    --color-on-primary-fixed:         #C0FFA5;
    --color-on-primary-fixed-variant: #9ef087;
    --color-inverse-primary:          #004227;

    --color-secondary:                #9ef087; /* Light lime */
    --color-on-secondary:             #001a0e;
    --color-secondary-container:      #003520;
    --color-on-secondary-container:   #C0FFA5;

    --color-tertiary:                 #a78bfa; /* Violet-400 */
    --color-on-tertiary:              #0f172a;
    --color-tertiary-container:       #4c1d95; /* Violet-900 */
    --color-on-tertiary-container:    #ede9fe; /* Violet-100 */

    --color-error:                    #f87171; /* Red-400 */
    --color-on-error:                 #7f1d1d;
    --color-error-container:          #7f1d1d;
    --color-on-error-container:       #fee2e2;

    /* ── Surface Neutrals overrides ── */
    --color-background:               #0b0f19; /* Very deep dark space */
    --color-on-background:            #f8fafc; /* Slate-50 */
    --color-surface:                  #111827; /* Slate-900 */
    --color-on-surface:               #f8fafc;
    --color-surface-variant:          #1f2937; /* Slate-800 */
    --color-on-surface-variant:       #94a3b8; /* Slate-400 */
    --color-surface-bright:           #1f2937;
    --color-surface-dim:              #0f172a;
    --color-surface-container-lowest: #0e131f; /* Clean pitch black-blue */
    --color-surface-container-low:    #151c2c;
    --color-surface-container:        #1e293b; /* Slate-800 */
    --color-surface-container-high:   #334155; /* Slate-700 */
    --color-surface-container-highest:#475569; /* Slate-600 */
    --color-surface-tint:             #6ad05a;
    --color-inverse-surface:          #f8fafc;
    --color-inverse-on-surface:       #0f172a;

    --color-outline:                  #475569; /* Slate-600 */
    --color-outline-variant:          #1e293b; /* Slate-800, soft borders */

    /* ── Status badge overrides ── */
    --badge-hot-bg:       #7f1d1d; --badge-hot-text:       #fca5a5;
    --badge-warm-bg:      #4c1d95; --badge-warm-text:      #ddd6fe;
    --badge-new-bg:       #064e3b; --badge-new-text:       #a7f3d0;
    --badge-contacted-bg: #1e1b4b; --badge-contacted-text: #c7d2fe;
    --badge-converted-bg: #115e59; --badge-converted-text: #99f6e4;
    --badge-closed-bg:    #334155; --badge-closed-text:    #cbd5e1;
    --badge-pending-bg:   #1e293b; --badge-pending-text:   #94a3b8;
    --badge-approved-bg:  #064e3b; --badge-approved-text:  #a7f3d0;
    --badge-sent-bg:      #1e1b4b; --badge-sent-text:      #c7d2fe;
    --badge-whatsapp-bg:  #14532d; --badge-whatsapp-text:  #86efac;
    --badge-profile-created-bg:   #4c1d95; --badge-profile-created-text: #ddd6fe;

    /* ── Icon chip overrides ── */
    --color-icon-indigo-bg:  #1e1b4b; --color-icon-indigo-fg:  #818cf8;
    --color-icon-green-bg:   #064e3b; --color-icon-green-fg:   #4ade80;
    --color-icon-blue-bg:    #172554; --color-icon-blue-fg:    #60a5fa;
    --color-icon-teal-bg:    #115e59; --color-icon-teal-fg:    #2dd4bf;
    --color-icon-amber-bg:   #451a03; --color-icon-amber-fg:   #fbbf24;
    --color-icon-red-bg:     #450a0a; --color-icon-red-fg:     #f87171;
    --color-icon-purple-bg:  #3b0764; --color-icon-purple-fg:  #c084fc;
    --color-icon-orange-bg:  #431407; --color-icon-orange-fg:  #fb923c;
    --color-icon-pink-bg:    #500724; --color-icon-pink-fg:    #f472b6;
    --color-icon-yellow-bg:  #3f2f0c; --color-icon-yellow-fg:  #facc15;
    --color-icon-cyan-bg:    #083344; --color-icon-cyan-fg:    #22d3ee;

    /* ── Chat Theme Tokens (Dark Mode Overrides) ── */
    --color-background-chat:          #0b0f19;
    --bg-image-chat:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><rect width='60' height='60' fill='%231e293b' opacity='0.15'/></svg>");
    --color-chat-bubble-inbound:      #1e293b;
    --color-chat-text-inbound:        #f8fafc;
    --color-chat-time-inbound:        #94a3b8;
    --color-chat-bubble-outbound:     #052e16;
    --color-chat-text-outbound:       #dcfce7;
    --color-chat-time-outbound:       #86efac;
}