/* ==========================================================================
   YooCRM V2 Design Tokens
   Color scheme: white / magenta / black
   ========================================================================== */

:root,
[data-theme="light"] {
    /* ---- Brand ---- */
    --color-primary:          #c026d3;
    --color-primary-hover:    #a21caf;
    --color-primary-light:    #e879f9;
    --color-primary-soft:     rgba(192, 38, 211, 0.10);
    --color-primary-softer:   rgba(192, 38, 211, 0.05);
    --color-primary-text:     #9333ea;
    --color-primary-rgb:      192, 38, 211;

    /* ---- Backgrounds ---- */
    --bg-body:                #f7f8fa;
    --bg-card:                #ffffff;
    --bg-card-hover:          #fafafa;
    --bg-muted:               #f3f4f6;
    --bg-input:               #ffffff;

    /* ---- Sidebar ---- */
    --sidebar-bg:             #09090b;
    --sidebar-bg-hover:       rgba(255, 255, 255, 0.05);
    --sidebar-bg-active:      rgba(192, 38, 211, 0.15);
    --sidebar-text:           #a1a1aa;
    --sidebar-text-hover:     #ffffff;
    --sidebar-text-active:    #c026d3;
    --sidebar-border:         #27272a;
    --sidebar-brand:          #c026d3;

    /* ---- Text ---- */
    --text-primary:           #111827;
    --text-secondary:         #6b7280;
    --text-tertiary:          #9ca3af;
    --text-inverse:           #ffffff;

    /* ---- Borders ---- */
    --border-light:           #e5e7eb;
    --border-medium:          #d1d5db;
    --border-focus:           var(--color-primary);

    /* ---- Shadows ---- */
    --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:              0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:              0 10px 25px rgba(0, 0, 0, 0.10);

    /* ---- Semantic ---- */
    --color-success:          #16a34a;
    --color-success-bg:       #dcfce7;
    --color-danger:           #dc2626;
    --color-danger-bg:        #fee2e2;
    --color-warning:          #d97706;
    --color-warning-bg:       #fef3c7;
    --color-info:             #0284c7;
    --color-info-bg:          #e0f2fe;

    /* ---- Layout ---- */
    --sidebar-width:          260px;
    --header-height:          64px;
    --border-radius:          8px;
    --border-radius-lg:       12px;
    --border-radius-xl:       16px;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] {
    --color-primary:          #d946ef;
    --color-primary-hover:    #e879f9;
    --color-primary-light:    #f0abfc;
    --color-primary-soft:     rgba(217, 70, 239, 0.15);
    --color-primary-softer:   rgba(217, 70, 239, 0.08);
    --color-primary-text:     #d946ef;
    --color-primary-rgb:      217, 70, 239;

    --bg-body:                #0f0f14;
    --bg-card:                #1a1a24;
    --bg-card-hover:          #222230;
    --bg-muted:               #16161e;
    --bg-input:               #1e1e2a;

    --sidebar-bg:             #0a0a0e;
    --sidebar-bg-hover:       rgba(255, 255, 255, 0.06);
    --sidebar-bg-active:      rgba(217, 70, 239, 0.15);
    --sidebar-text:           #71717a;
    --sidebar-text-hover:     #e4e4e7;
    --sidebar-text-active:    #d946ef;
    --sidebar-border:         #27272a;
    --sidebar-brand:          #d946ef;

    --text-primary:           #f4f4f5;
    --text-secondary:         #a1a1aa;
    --text-tertiary:          #71717a;
    --text-inverse:           #09090b;

    --border-light:           #27272a;
    --border-medium:          #3f3f46;
    --border-focus:           var(--color-primary);

    --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:              0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg:              0 10px 25px rgba(0, 0, 0, 0.5);

    --color-success:          #22c55e;
    --color-success-bg:       rgba(34, 197, 94, 0.15);
    --color-danger:           #ef4444;
    --color-danger-bg:        rgba(239, 68, 68, 0.15);
    --color-warning:          #f59e0b;
    --color-warning-bg:       rgba(245, 158, 11, 0.15);
    --color-info:             #38bdf8;
    --color-info-bg:          rgba(56, 189, 248, 0.15);

    /* ---- Bootstrap 5 internal variable overrides ---- */
    --bs-body-color:          #f4f4f5;
    --bs-body-bg:             #0f0f14;
    --bs-secondary-color:     #a1a1aa;
    --bs-tertiary-color:      #71717a;
    --bs-emphasis-color:      #f4f4f5;
    --bs-border-color:        #27272a;
    --bs-heading-color:       #f4f4f5;
    --bs-link-color:          #d946ef;
    --bs-link-hover-color:    #e879f9;
    --bs-code-color:          #e879f9;
    --bs-card-bg:             #1a1a24;
    --bs-card-border-color:   #27272a;
    --bs-modal-bg:            #1a1a24;
    --bs-modal-border-color:  #27272a;
    --bs-modal-color:         #f4f4f5;
    --bs-table-color:         #f4f4f5;
    --bs-table-bg:            transparent;
    --bs-table-hover-bg:      #222230;
    --bs-table-striped-bg:    #16161e;
    --bs-table-border-color:  #27272a;
    --bs-input-bg:            #1e1e2a;
    --bs-input-color:         #f4f4f5;
    --bs-input-border-color:  #27272a;
}