/**
 * Shopping City CRM — Design Tokens
 *
 * Single source of truth for all design values.
 * To re-theme the entire CRM, change ONLY this file.
 *
 * Loaded FIRST — before app.css, components.css, etc.
 *
 * Naming convention:
 *   --color-{role}           Semantic colors (primary, danger, success…)
 *   --color-{role}-{shade}   Lighter/darker shade (hover, active, light, bg…)
 *   --color-gray-{n}         Neutral scale (50–950)
 *   --radius-{size}          Border-radius tokens
 *   --shadow-{name}          Box-shadow tokens
 *   --font-{role}            Font stacks
 *   --ring-{name}            Focus ring tokens
 */

:root {
    /* ═══════════════════════════════════════════
       COLORS — Primary (Indigo)
       ═══════════════════════════════════════════ */
    --color-primary:        #4f46e5;  /* btn-primary, tab active, pagination active */
    --color-primary-hover:  #4338ca;  /* button hover */
    --color-primary-active: #3730a3;  /* button active / pressed */
    --color-primary-light:  #6366f1;  /* focus ring, border-focus, lighter accent */
    --color-primary-50:     #eef2ff;  /* ghost hover, card-info bg */
    --color-primary-100:    #e0e7ff;  /* ghost active, badge-indigo bg */
    --color-primary-200:    #c7d2fe;  /* card-info border */
    /* Bridge scale ↓ aligns Tailwind utilities with this palette (tailwind-bridge.css) */
    --color-primary-300:    #a5b4fc;
    --color-primary-400:    #818cf8;
    --color-primary-500:    #6366f1;  /* = --color-primary-light */
    --color-primary-600:    #4f46e5;  /* = --color-primary */
    --color-primary-700:    #4338ca;  /* = --color-primary-hover */
    --color-primary-800:    #3730a3;  /* = --color-primary-active */
    --color-primary-900:    #312e81;

    /* ═══════════════════════════════════════════
       COLORS — Danger (Red)
       ═══════════════════════════════════════════ */
    --color-danger:         #dc2626;
    --color-danger-hover:   #b91c1c;
    --color-danger-active:  #991b1b;
    --color-danger-50:      #fef2f2;  /* card-danger bg, alert-danger bg */
    --color-danger-100:     #fee2e2;  /* badge-red bg */
    --color-danger-200:     #fecaca;  /* card-danger border, alert-danger border */
    /* Bridge scale */
    --color-danger-300:     #fca5a5;
    --color-danger-400:     #f87171;
    --color-danger-500:     #ef4444;
    --color-danger-600:     #dc2626;  /* = --color-danger */
    --color-danger-700:     #b91c1c;  /* = --color-danger-hover */
    --color-danger-800:     #991b1b;  /* = --color-danger-active */
    --color-danger-900:     #7f1d1d;

    /* ═══════════════════════════════════════════
       COLORS — Success (Green)
       ═══════════════════════════════════════════ */
    --color-success:        #16a34a;
    --color-success-hover:  #15803d;
    --color-success-active: #166534;
    --color-success-50:     #f0fdf4;  /* card-success bg, alert-success bg */
    --color-success-100:    #dcfce7;  /* badge-green bg */
    --color-success-200:    #bbf7d0;  /* card-success border, alert-success border */
    /* Bridge scale */
    --color-success-300:    #86efac;
    --color-success-400:    #4ade80;
    --color-success-500:    #22c55e;
    --color-success-600:    #16a34a;  /* = --color-success */
    --color-success-700:    #15803d;  /* = --color-success-hover */
    --color-success-800:    #166534;  /* = --color-success-active */
    --color-success-900:    #14532d;

    /* ═══════════════════════════════════════════
       COLORS — Warning (Amber)
       ═══════════════════════════════════════════ */
    --color-warning:        #d97706;
    --color-warning-hover:  #b45309;
    --color-warning-active: #92400e;
    --color-warning-50:     #fffbeb;  /* card-warning bg, alert-warning bg */
    --color-warning-100:    #fef3c7;  /* badge-amber bg */
    --color-warning-200:    #fde68a;  /* card-warning border, alert-warning border */
    /* Bridge scale */
    --color-warning-300:    #fcd34d;
    --color-warning-400:    #fbbf24;
    --color-warning-500:    #f59e0b;
    --color-warning-600:    #d97706;  /* = --color-warning */
    --color-warning-700:    #b45309;  /* = --color-warning-hover */
    --color-warning-800:    #92400e;  /* = --color-warning-active */
    --color-warning-900:    #78350f;

    /* ═══════════════════════════════════════════
       COLORS — Info (Blue)
       ═══════════════════════════════════════════ */
    --color-info:           #2563eb;
    --color-info-hover:     #1d4ed8;
    --color-info-active:    #1e40af;
    --color-info-50:        #eff6ff;  /* alert-info bg */
    --color-info-100:       #dbeafe;  /* badge-blue bg */
    --color-info-200:       #bfdbfe;  /* alert-info border */
    /* Bridge scale */
    --color-info-300:       #93c5fd;
    --color-info-400:       #60a5fa;
    --color-info-500:       #3b82f6;
    --color-info-600:       #2563eb;  /* = --color-info */
    --color-info-700:       #1d4ed8;  /* = --color-info-hover */
    --color-info-800:       #1e40af;  /* = --color-info-active */
    --color-info-900:       #1e3a8a;

    /* ═══════════════════════════════════════════
       COLORS — Extra badge palettes
       ═══════════════════════════════════════════ */
    --color-orange-50:      #fff7ed;
    --color-orange-100:     #ffedd5;  /* badge-orange bg */
    --color-orange-200:     #fed7aa;
    --color-orange-300:     #fdba74;
    --color-orange-400:     #fb923c;
    --color-orange-500:     #f97316;  /* progress-orange fill */
    --color-orange-600:     #ea580c;
    --color-orange-700:     #c2410c;  /* badge-orange text */
    --color-orange-800:     #9a3412;
    --color-purple-50:      #faf5ff;
    --color-purple-100:     #f3e8ff;  /* badge-purple bg */
    --color-purple-400:     #c084fc;
    --color-purple-500:     #a855f7;  /* progress-purple fill */
    --color-purple-600:     #9333ea;
    --color-purple-700:     #7e22ce;  /* badge-purple text */
    --color-emerald-50:     #ecfdf5;
    --color-emerald-100:    #d1fae5;  /* badge-emerald bg */
    --color-emerald-500:    #10b981;
    --color-emerald-600:    #059669;
    --color-emerald-700:    #047857;  /* badge-emerald text */
    --color-emerald-800:    #065f46;
    --color-yellow-50:      #fefce8;
    --color-yellow-100:     #fef9c3;  /* badge-yellow bg */
    --color-yellow-200:     #fef08a;
    --color-yellow-300:     #fde047;  /* badge-yellow-strong bg */
    --color-yellow-400:     #facc15;
    --color-yellow-500:     #eab308;  /* progress-yellow fill */
    --color-yellow-600:     #ca8a04;
    --color-yellow-700:     #a16207;  /* badge-yellow text */
    --color-yellow-800:     #854d0e;
    --color-yellow-900:     #713f12;  /* badge-yellow-strong text */
    --color-cyan-100:       #cffafe;  /* badge-cyan bg */
    --color-cyan-500:       #06b6d4;  /* progress-cyan fill */
    --color-cyan-600:       #0891b2;
    --color-cyan-700:       #0e7490;  /* badge-cyan text */
    --color-teal-50:        #f0fdfa;
    --color-teal-600:       #0d9488;
    --color-teal-700:       #0f766e;
    --color-violet-600:     #7c3aed;
    --color-pink-400:       #f472b6;
    --color-pink-500:       #ec4899;
    --color-pink-600:       #db2777;

    /* ═══════════════════════════════════════════
       COLORS — Neutral (Gray) scale
       ═══════════════════════════════════════════ */
    --color-gray-50:  #f9fafb;  /* table header bg, hover rows */
    --color-gray-100: #f3f4f6;  /* page background, btn-secondary bg, table row borders */
    --color-gray-200: #e5e7eb;  /* borders, dividers, btn-secondary hover, badge-gray bg, progress track */
    --color-gray-300: #d1d5db;  /* form input borders, btn-secondary active, filter-drawer handle */
    --color-gray-400: #9ca3af;  /* placeholder text, empty-state, pagination ellipsis */
    --color-gray-500: #6b7280;  /* muted text, table headers, badge-gray text */
    --color-gray-600: #4b5563;  /* — spare mid tone — */
    --color-gray-700: #374151;  /* body text, btn-secondary text, form labels */
    --color-gray-800: #1f2937;  /* headings, sidebar bg, titles */
    --color-gray-900: #111827;  /* form input text, strongest emphasis */

    --color-white:    #ffffff;
    --color-black:    #000000;

    /* ═══════════════════════════════════════════
       TYPOGRAPHY — Font stacks
       ═══════════════════════════════════════════ */
    --font-sans:  'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* ═══════════════════════════════════════════
       TYPOGRAPHY — Size scale
       ═══════════════════════════════════════════ */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px — body, table cells, form inputs */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px — page-title, kpi-value */
    --text-3xl:  1.875rem;   /* 30px — kpi-value-lg */
    --text-4xl:  2.25rem;    /* 36px — hero/display */

    /* ═══════════════════════════════════════════
       TYPOGRAPHY — Font weight
       ═════════════════════════════════════════════ */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* ═════════════════════════════════════════════
       ANIMATION — Duration
       ═════════════════════════════════════════════ */
    --duration-75:  75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;

    /* ═════════════════════════════════════════════
       ANIMATION — Easing
       ═════════════════════════════════════════════ */
    --ease-linear:  linear;
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ═══════════════════════════════════════════
       SPACING scale (4pt grid)
       ═══════════════════════════════════════════ */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ═══════════════════════════════════════════
       BORDER-RADIUS
       ═══════════════════════════════════════════ */
    --radius-sm:   0.375rem;  /* 6px  — small inputs, form-input-sm */
    --radius-md:   0.5rem;    /* 8px  — buttons, forms, tabs, alerts, page-link */
    --radius-lg:   0.75rem;   /* 12px — cards, mobile-card, btn-xl */
    --radius-xl:   1rem;      /* 16px — filter-drawer, error page card */
    --radius-2xl:  1.5rem;    /* 24px — large modals, hero cards */
    --radius-full: 9999px;    /* pill — badges, progress bar */

    /* ═══════════════════════════════════════════
       BORDER-WIDTH
       ═════════════════════════════════════════════ */
    --border-width-0:    0px;
    --border-width-base: 1px;
    --border-width-2:    2px;
    --border-width-4:    4px;
    --border-width-8:    8px;
       ═══════════════════════════════════════════ */
    --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-drawer: 0 -4px 20px rgba(0, 0, 0, 0.15);
    --shadow-sticky: 2px 0 4px rgba(0, 0, 0, 0.05);

    /* ═══════════════════════════════════════════
       FOCUS RING
       ═══════════════════════════════════════════ */
    --ring-color:   rgba(99, 102, 241, 0.25);  /* unified opacity for all focus rings */
    --ring-width:   3px;
    --ring-offset:  2px;     /* for outline-offset on focus-visible */

    /* ═══════════════════════════════════════════
       SIDEBAR
       ═══════════════════════════════════════════ */
    --sidebar-width: 16rem;
    --sidebar-bg:    var(--color-gray-800);
    --sidebar-text:  var(--color-white);
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-scroll-thumb: rgba(255, 255, 255, 0.15);
    --sidebar-scroll-hover: rgba(255, 255, 255, 0.25);

    /* ═══════════════════════════════════════════
       HEADER BAR
       ═══════════════════════════════════════════ */
    --header-height: 4rem;
    --header-bg:     var(--color-white);

    /* ═══════════════════════════════════════════
       LAYOUT
       ═══════════════════════════════════════════ */
    --content-padding:        1.5rem;
    --content-padding-mobile: 0.75rem;

    /* ═══════════════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════════════ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ═══════════════════════════════════════════
       OVERLAY
       ═══════════════════════════════════════════ */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.3);

    /* ═══════════════════════════════════════════
       CHART PALETTE
       ═══════════════════════════════════════════ */
    --chart-1:  var(--color-primary-500);   /* indigo  — primary series */
    --chart-2:  var(--color-success-500);   /* green   — secondary series */
    --chart-3:  var(--color-warning-500);   /* amber   — tertiary series */
    --chart-4:  var(--color-danger-500);    /* red     — danger series */
    --chart-5:  var(--color-info-500);      /* blue    — info series */
    --chart-6:  var(--color-purple-500);    /* purple */
    --chart-7:  var(--color-pink-500);      /* pink */
    --chart-8:  var(--color-cyan-500);      /* cyan / teal */
    --chart-9:  var(--color-orange-500);    /* orange */
    --chart-10: var(--color-gray-400);      /* muted / gray */
    --chart-tooltip-bg:  var(--color-gray-800);
    --chart-grid-color:  var(--color-gray-100);
    --chart-tick-color:  var(--color-gray-400);

    /* ═══════════════════════════════════════════
       SEMANTIC LAYER — meaning over color
       Use these in components, not raw palette vars.
       Override in [data-theme="dark"] to get dark mode.
       ═══════════════════════════════════════════ */

    /* Surfaces */
    --surface-page:    var(--color-gray-100);   /* page background */
    --surface-card:    var(--color-white);       /* card / panel background */
    --surface-sunken:  var(--color-gray-50);     /* inset / recessed area */
    --surface-overlay: var(--overlay-bg);        /* modal backdrop */
    --surface-inverse: var(--color-gray-800);    /* dark surface (tooltip, badge-dark) */

    /* Text */
    --text-primary:   var(--color-gray-900);    /* body text, headings */
    --text-secondary: var(--color-gray-700);    /* sub-labels, descriptions */
    --text-muted:     var(--color-gray-500);    /* placeholders, hints */
    --text-inverse:   var(--color-white);       /* text on dark bg */
    --text-disabled:  var(--color-gray-400);    /* disabled state */

    /* Borders */
    --border-default: var(--color-gray-200);    /* standard dividers, card borders */
    --border-strong:  var(--color-gray-300);    /* emphasized borders, input focus-ring adjacent */
    --border-subtle:  var(--color-gray-100);    /* hairline dividers */
    --border-focus:   var(--color-primary);     /* focus ring */

    /* Interactive */
    --interactive-bg:       var(--color-primary);       /* primary button bg */
    --interactive-bg-hover: var(--color-primary-hover); /* primary button hover */
    --interactive-text:     var(--color-white);          /* text on primary bg */

    /* ═══════════════════════════════════════════
       DENSITY — UI compactness multiplier
       Default = comfortable (1).
       Override with [data-density="compact"] etc.
       ═══════════════════════════════════════════ */
    --density: 1;

    --control-height-sm:  calc(1.75rem * var(--density));
    --control-height-md:  calc(2.375rem * var(--density));
    --control-height-lg:  calc(2.75rem * var(--density));
    --control-padding-x:  calc(0.75rem * var(--density));
    --control-padding-y:  calc(0.5rem  * var(--density));
    --table-row-padding:  calc(0.75rem * var(--density));
}

/* Density presets — apply to <html> or any ancestor */
[data-density="compact"]     { --density: 0.85; }
[data-density="comfortable"] { --density: 1; }
[data-density="spacious"]    { --density: 1.15; }

/* ════════════════════════════════════════════════════════════════
   THEME PRESETS — uncomment ONE block to re-theme the entire CRM
   Default: INDIGO (active above in :root)
   ════════════════════════════════════════════════════════════════

/* ═══ THEME: TEAL ═══
   A calm, professional look. Swap indigo for teal.
   To activate: copy these into :root above, replacing the primary block.

:root {
    --color-primary:        #0d9488;
    --color-primary-hover:  #0f766e;
    --color-primary-active: #115e59;
    --color-primary-light:  #14b8a6;
    --color-primary-50:     #f0fdfa;
    --color-primary-100:    #ccfbf1;
    --color-primary-200:    #99f6e4;
    --color-primary-300:    #5eead4;
    --color-primary-400:    #2dd4bf;
    --color-primary-500:    #14b8a6;
    --color-primary-600:    #0d9488;
    --color-primary-700:    #0f766e;
    --color-primary-800:    #115e59;
    --color-primary-900:    #134e4a;
    --ring-color:           rgba(20, 184, 166, 0.25);
    --chart-1:              var(--color-primary-500);
}
═══ END THEME: TEAL ═══ */

/* ═══ THEME: ROSE ═══
   Bold, energetic. Swap indigo for rose/pink.
   To activate: copy these into :root above, replacing the primary block.

:root {
    --color-primary:        #e11d48;
    --color-primary-hover:  #be123c;
    --color-primary-active: #9f1239;
    --color-primary-light:  #f43f5e;
    --color-primary-50:     #fff1f2;
    --color-primary-100:    #ffe4e6;
    --color-primary-200:    #fecdd3;
    --color-primary-300:    #fda4af;
    --color-primary-400:    #fb7185;
    --color-primary-500:    #f43f5e;
    --color-primary-600:    #e11d48;
    --color-primary-700:    #be123c;
    --color-primary-800:    #9f1239;
    --color-primary-900:    #881337;
    --ring-color:           rgba(244, 63, 94, 0.25);
    --chart-1:              var(--color-primary-500);
}
═══ END THEME: ROSE ═══ */

/* ═══ THEME: SLATE-PRO ═══
   Minimal, neutral enterprise look. Swap indigo for slate/dark-blue.
   To activate: copy these into :root above, replacing the primary block.

:root {
    --color-primary:        #334155;
    --color-primary-hover:  #1e293b;
    --color-primary-active: #0f172a;
    --color-primary-light:  #475569;
    --color-primary-50:     #f8fafc;
    --color-primary-100:    #f1f5f9;
    --color-primary-200:    #e2e8f0;
    --color-primary-300:    #cbd5e1;
    --color-primary-400:    #94a3b8;
    --color-primary-500:    #64748b;
    --color-primary-600:    #475569;
    --color-primary-700:    #334155;
    --color-primary-800:    #1e293b;
    --color-primary-900:    #0f172a;
    --ring-color:           rgba(100, 116, 139, 0.25);
    --chart-1:              var(--color-primary-500);
    --sidebar-bg:           #0f172a;
}
═══ END THEME: SLATE-PRO ═══ */

/* ════════════════════════════════════════════════════════════════
   DARK THEME — overrides semantic layer only.
   Palette vars (--color-*) stay the same; only meaning-layer changes.
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Surfaces */
    --surface-page:    #0f172a;
    --surface-card:    #1e293b;
    --surface-sunken:  #0f172a;
    --surface-overlay: rgba(0, 0, 0, 0.7);
    --surface-inverse: #f1f5f9;

    /* Text */
    --text-primary:   #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --text-inverse:   #0f172a;
    --text-disabled:  #64748b;

    /* Borders */
    --border-default: #334155;
    --border-strong:  #475569;
    --border-subtle:  #1e293b;
    --border-focus:   var(--color-primary-light);

    /* Sidebar — must be hardcoded, not derived from gray scale
       (gray-800 gets inverted to #f1f5f9 in dark mode, breaking sidebar) */
    --sidebar-bg:   #0f172a;
    --sidebar-text: #f1f5f9;

    /* Semantic status colors — dark-tinted instead of light pastels.
       Used by card-*, alert-*, badge-*, and any bg-*-50 / bg-*-100 components. */
    --color-danger-50:      rgba(239, 68, 68, 0.12);
    --color-danger-100:     rgba(239, 68, 68, 0.20);
    --color-danger-200:     rgba(239, 68, 68, 0.35);
    --color-success-50:     rgba(34, 197, 94, 0.12);
    --color-success-100:    rgba(34, 197, 94, 0.20);
    --color-success-200:    rgba(34, 197, 94, 0.35);
    --color-warning-50:     rgba(245, 158, 11, 0.12);
    --color-warning-100:    rgba(245, 158, 11, 0.20);
    --color-warning-200:    rgba(245, 158, 11, 0.35);
    --color-primary-50:     rgba(99, 102, 241, 0.12);
    --color-primary-100:    rgba(99, 102, 241, 0.20);
    --color-primary-200:    rgba(99, 102, 241, 0.35);

    /* Gray scale — FULL INVERSION for dark mode.
       Light mode:  50=lightest bg  →  900=darkest text
       Dark mode:   50=darkest bg   →  900=lightest text
       This makes all components that use var(--color-gray-*) look correct
       without changing the component code. */
    --color-gray-50:  #1e293b;   /* was bg-light  → now dark surface */
    --color-gray-100: #334155;   /* was page-bg   → now card surface */
    --color-gray-200: #475569;   /* was border    → now visible border */
    --color-gray-300: #64748b;   /* was light text → now mid tone */
    --color-gray-400: #94a3b8;   /* placeholder   → stays readable */
    --color-gray-500: #94a3b8;   /* muted text    → light enough */
    --color-gray-600: #cbd5e1;   /* body text     → light */
    --color-gray-700: #e2e8f0;   /* strong text   → very light */
    --color-gray-800: #f1f5f9;   /* headings      → near-white */
    --color-gray-900: #f8fafc;   /* max emphasis  → white */
    /* Note: --color-white stays #ffffff — used for text ON colored backgrounds (buttons, badges) */
}

/* ════════════════════════════════════════════════════════════════
   BRAND PRESETS — activate via data-theme attribute on <html>.
   ════════════════════════════════════════════════════════════════ */
[data-theme="teal"] {
    --color-primary:        #0d9488;
    --color-primary-hover:  #0f766e;
    --color-primary-active: #115e59;
    --color-primary-light:  #14b8a6;
    --color-primary-50:     #f0fdfa;
    --color-primary-100:    #ccfbf1;
    --color-primary-200:    #99f6e4;
    --color-primary-300:    #5eead4;
    --color-primary-400:    #2dd4bf;
    --color-primary-500:    #14b8a6;
    --color-primary-600:    #0d9488;
    --color-primary-700:    #0f766e;
    --color-primary-800:    #115e59;
    --color-primary-900:    #134e4a;
    --ring-color:           rgba(20, 184, 166, 0.25);
    --interactive-bg:       #0d9488;
    --interactive-bg-hover: #0f766e;
}

[data-theme="rose"] {
    --color-primary:        #e11d48;
    --color-primary-hover:  #be123c;
    --color-primary-active: #9f1239;
    --color-primary-light:  #f43f5e;
    --color-primary-50:     #fff1f2;
    --color-primary-100:    #ffe4e6;
    --color-primary-200:    #fecdd3;
    --color-primary-300:    #fda4af;
    --color-primary-400:    #fb7185;
    --color-primary-500:    #f43f5e;
    --color-primary-600:    #e11d48;
    --color-primary-700:    #be123c;
    --color-primary-800:    #9f1239;
    --color-primary-900:    #881337;
    --ring-color:           rgba(244, 63, 94, 0.25);
    --interactive-bg:       #e11d48;
    --interactive-bg-hover: #be123c;
}

[data-theme="slate-pro"] {
    --color-primary:        #334155;
    --color-primary-hover:  #1e293b;
    --color-primary-active: #0f172a;
    --color-primary-light:  #475569;
    --color-primary-50:     #f8fafc;
    --color-primary-100:    #f1f5f9;
    --color-primary-200:    #e2e8f0;
    --color-primary-300:    #cbd5e1;
    --color-primary-400:    #94a3b8;
    --color-primary-500:    #64748b;
    --color-primary-600:    #475569;
    --color-primary-700:    #334155;
    --color-primary-800:    #1e293b;
    --color-primary-900:    #0f172a;
    --ring-color:           rgba(100, 116, 139, 0.25);
    --sidebar-bg:           #0f172a;
    --interactive-bg:       #334155;
    --interactive-bg-hover: #1e293b;
}