@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  /* ----------------------------------------------------
     1. DEFAULT THEME: Indigo (Elegant / Tech / SaaS)
     ---------------------------------------------------- */
  :root,
  [data-color-theme="indigo"] {
    --color-primary-50: #f5f3ff;
    --color-primary-100: #ede9fe;
    --color-primary-500: #6366f1;
    --color-primary-600: #4f46e5;
    --color-primary-700: #4338ca;

    /* Brand sidebar theme gradients */
    --sidebar-bg: linear-gradient(135deg, #4f46e5 0%, #312e81 100%);
    --sidebar-bg-h: linear-gradient(90deg, #4f46e5 0%, #312e81 100%);
    --sidebar-text: #e0e7ff;
    --sidebar-text-muted: #c7d2fe;
    --sidebar-item-hover: rgba(255, 255, 255, 0.1);
    --sidebar-item-active: rgba(255, 255, 255, 0.2);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     2. THEME: Emerald (Finance / Growth / Fresh)
     ---------------------------------------------------- */
  [data-color-theme="emerald"] {
    --color-primary-50: #f0fdf4;
    --color-primary-100: #dcfce7;
    --color-primary-500: #10b981;
    --color-primary-600: #059669;
    --color-primary-700: #047857;

    --sidebar-bg: linear-gradient(135deg, #059669 0%, #064e3b 100%);
    --sidebar-bg-h: linear-gradient(90deg, #059669 0%, #064e3b 100%);
    --sidebar-text: #d1fae5;
    --sidebar-text-muted: #a7f3d0;
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.18);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     3. THEME: Amber (Warm / Asset / Operations)
     ---------------------------------------------------- */
  [data-color-theme="amber"] {
    --color-primary-50: #fffbeb;
    --color-primary-100: #fef3c7;
    --color-primary-500: #f59e0b;
    --color-primary-600: #d97706;
    --color-primary-700: #b45309;

    --sidebar-bg: linear-gradient(135deg, #d97706 0%, #78350f 100%);
    --sidebar-bg-h: linear-gradient(90deg, #d97706 0%, #78350f 100%);
    --sidebar-text: #fef3c7;
    --sidebar-text-muted: #fde68a;
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.18);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     4. THEME: Rose (Modern / Creative / Health)
     ---------------------------------------------------- */
  [data-color-theme="rose"] {
    --color-primary-50: #fff1f2;
    --color-primary-100: #ffe4e6;
    --color-primary-500: #f43f5e;
    --color-primary-600: #e11d48;
    --color-primary-700: #be123c;

    --sidebar-bg: linear-gradient(135deg, #e11d48 0%, #881337 100%);
    --sidebar-bg-h: linear-gradient(90deg, #e11d48 0%, #881337 100%);
    --sidebar-text: #ffe4e6;
    --sidebar-text-muted: #fecdd3;
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.18);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     5. THEME: Violet & Obsidian (Deep Space Tech)
     ---------------------------------------------------- */
  [data-color-theme="violet-obsidian"] {
    --color-primary-50: #faf5ff;
    --color-primary-100: #f3e8ff;
    --color-primary-500: #a855f7;
    --color-primary-600: #9333ea;
    --color-primary-700: #7e22ce;

    --sidebar-bg: linear-gradient(135deg, #7e22ce 0%, #3b0764 100%);
    --sidebar-bg-h: linear-gradient(90deg, #7e22ce 0%, #3b0764 100%);
    --sidebar-text: #f3e8ff;
    --sidebar-text-muted: #e9d5ff;
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.18);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     6. THEME: Midnight Cyan (High-Tech Corporate)
     ---------------------------------------------------- */
  [data-color-theme="midnight-cyan"] {
    --color-primary-50: #ecfeff;
    --color-primary-100: #cffafe;
    --color-primary-500: #06b6d4;
    --color-primary-600: #0891b2;
    --color-primary-700: #0e7490;

    --sidebar-bg: linear-gradient(135deg, #0e7490 0%, #164e63 100%);
    --sidebar-bg-h: linear-gradient(90deg, #0e7490 0%, #164e63 100%);
    --sidebar-text: #cffafe;
    --sidebar-text-muted: #a5f3fc;
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.18);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     7. THEME: Dark Slate (Minimal / Executive)
     ---------------------------------------------------- */
  [data-color-theme="dark-slate"] {
    --color-primary-50: #f8fafc;
    --color-primary-100: #f1f5f9;
    --color-primary-500: #475569;
    --color-primary-600: #334155;
    --color-primary-700: #1e293b;

    --sidebar-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --sidebar-bg-h: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
    --sidebar-text: #f1f5f9;
    --sidebar-text-muted: #cbd5e1;
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.18);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     8. THEME: NeoQom (Cyber Green & Electric Cyan Brand)
     ---------------------------------------------------- */
  [data-color-theme="neoqom"] {
    --color-primary-50: #f0fdf6;
    --color-primary-100: #dcfce7;
    --color-primary-500: #00b833;
    --color-primary-600: #00992b;
    --color-primary-700: #007a22;

    /* NeoQom signature Green-to-Cyan transition */
    --sidebar-bg: linear-gradient(135deg, #008f32 0%, #006b7a 100%);
    --sidebar-bg-h: linear-gradient(90deg, #008f32 0%, #006b7a 100%);
    --sidebar-text: #e6fff0;
    --sidebar-text-muted: #99f0be;
    --sidebar-item-hover: rgba(255, 255, 255, 0.1);
    --sidebar-item-active: rgba(255, 255, 255, 0.2);
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-logo-text: #ffffff;
  }

  /* ----------------------------------------------------
     GLOBAL UI BASICS
     ---------------------------------------------------- */
  :root {
    --color-success-50: #f0fdf4;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;

    --color-danger-50: #fef2f2;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;

    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* Theme Layout Tokens */
    --bg-main: var(--color-gray-50);
    --bg-panel: #ffffff;
    --border-color: var(--color-gray-200);

    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-700);
    --text-muted: #64748b;
  }

  [data-theme="dark"] {
    --bg-main: #0b0f19;
    --bg-panel: #111827;
    --border-color: #1f2937;

    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
  }
}