/* OmniERP Marketing Website - Core Design System */
/* Theme: Enterprise Clean White & Royal Indigo-Purple */
/* Exactly matching the main OmniJewels ERP System Styling */

/* ========================================================================= */
/* 0. COLOR SYSTEM PALETTE (REPLACE THESE HEX NUMBERS TO CUSTOMIZE COLORS)   */
/* ========================================================================= */
:root {
  /* Surface Colors */
  --bg-white: #ffffff;             /* Primary Page Background (Pure White)    */
  --bg-surface-subtle: #f8fafc;    /* Card & Section Subtle Background        */
  --bg-surface-hover: #f1f5f9;     /* Hover state on cards and tables         */
  
  /* Border Colors */
  --border-subtle: #e2e8f0;        /* Subtle Border for Cards & Dividers      */
  --border-strong: #cbd5e1;        /* Form Inputs & Secondary Button Borders  */
  
  /* Brand Accent Colors (Royal Indigo & Royal Purple) */
  --brand-indigo: #4f46e5;         /* Royal Indigo Primary Color (#4F46E5)    */
  --brand-purple: #7c3aed;         /* Royal Purple Accent (#7C3AED)           */
  --brand-indigo-hover: #4338ca;   /* Darker Indigo on hover                  */
  --brand-purple-hover: #6d28d9;   /* Darker Purple on hover                  */
  --badge-bg: #eef2ff;             /* Soft Lavender Background for Badges     */
  --badge-border: #c7d2fe;         /* Soft Lavender Border                    */
  --badge-text: #4338ca;           /* Dark Indigo text inside badges          */
  
  /* Text & Typography Colors */
  --text-headline: #0f172a;        /* Primary Headings & Bold Text (Dark)     */
  --text-body: #1e293b;            /* Standard Paragraph & Card Body Text     */
  --text-muted: #64748b;           /* Captions, Subtitles & Secondary Info    */
}

/* ========================================================================= */
/* 1. BASE BODY & PAGE RESET - Pure Crisp White Canvas                       */
/* ========================================================================= */
html, body {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ========================================================================= */
/* 2. UNIVERSAL WHITE SURFACE OVERRIDES - Neutralize All Dark Slate Classes  */
/* ========================================================================= */
body,
main,
section,
article,
div[class*="bg-slate-950"],
div[class*="bg-slate-900"],
div[class*="bg-slate-850"],
div[class*="bg-slate-800"],
div[class*="bg-gray-9"],
div[class*="bg-zinc-9"],
section[class*="bg-slate-"],
section[class*="bg-gray-"],
article[class*="bg-slate-"],
aside[class*="bg-slate-"],
.bg-slate-950,
.bg-slate-900,
.bg-slate-850,
.bg-slate-800,
body.bg-slate-950 {
  background-color: #ffffff !important;
}

/* Subtle light grey-white for secondary cards, table headers, and mockups */
.bg-subtle,
div[class*="bg-slate-950/70"],
div[class*="bg-slate-950/80"],
div[class*="bg-slate-950/90"],
div[class*="bg-slate-900/40"],
div[class*="bg-slate-900/50"],
div[class*="bg-slate-900/60"],
div[class*="bg-slate-900/80"],
section[class*="bg-slate-900/40"],
section[class*="bg-slate-900/60"],
section[class*="bg-slate-900/80"] {
  background-color: #f8fafc !important;
}

/* Neutralize dark gradients and replace with clean subtle tint */
[class*="from-slate-950"],
[class*="from-slate-900"],
[class*="from-indigo-950"],
[class*="from-purple-950"],
[class*="from-blue-950"],
[class*="via-slate-900"],
[class*="via-purple-950"],
[class*="to-slate-950"],
[class*="to-slate-900"],
[class*="to-blue-950"] {
  background-image: none !important;
  background-color: #f8fafc !important;
}

/* ========================================================================= */
/* 3. CARD & SECTION CONTAINERS - Crisp Light Borders & Subtle Shadows       */
/* ========================================================================= */
div[class*="rounded"][class*="border"],
div[class*="rounded-xl"],
div[class*="rounded-2xl"],
div[class*="bg-slate-900"],
div[class*="bg-slate-950"] {
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
}

.border-slate-800,
.border-slate-700,
.border-slate-900,
[class*="border-slate-800"],
[class*="border-slate-700"],
[class*="border-slate-900"] {
  border-color: #e2e8f0 !important;
}

/* ========================================================================= */
/* 4. TYPOGRAPHY - Crisp High-Contrast Slate on Pure White                   */
/* ========================================================================= */
h1, h2, h3, h4, h5, h6,
.text-white,
[class*="text-slate-100"],
[class*="text-slate-200"] {
  color: #0f172a !important;
}

p,
li,
[class*="text-slate-300"] {
  color: #1e293b !important;
}

[class*="text-slate-400"] {
  color: #475569 !important;
}

[class*="text-slate-500"] {
  color: #64748b !important;
}

/* Gradient Headlines: Royal Indigo to Royal Purple */
.bg-clip-text,
[class*="bg-clip-text"] {
  background-image: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ========================================================================= */
/* 5. NAVIGATION BAR - Translucent White Glassmorphism                       */
/* ========================================================================= */
.glass-nav,
header.glass-nav {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

header nav a {
  color: #334155 !important;
  font-weight: 600 !important;
}
header nav a:hover,
header nav a[class*="text-indigo-"] {
  color: #4f46e5 !important;
}

#mobile-menu-drawer {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
#mobile-menu-drawer a {
  color: #1e293b !important;
}
#mobile-menu-drawer a:hover {
  color: #4f46e5 !important;
}

#mobile-menu-btn {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* ========================================================================= */
/* 6. BUTTONS & ACTIONS - Royal Indigo-Purple & Clean White Secondary Buttons */
/* ========================================================================= */
/* Primary CTA Buttons (Start Free Trial, Sign Up, Submit Demo) */
[data-erp-signup],
button[class*="bg-indigo-600"],
a[class*="bg-indigo-600"],
.bg-indigo-600,
.btn-primary {
  background-image: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

[data-erp-signup]:hover,
button[class*="bg-indigo-600"]:hover,
a[class*="bg-indigo-600"]:hover {
  background-image: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%) !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35) !important;
}

[data-erp-signup] *,
button[class*="bg-indigo-600"] *,
a[class*="bg-indigo-600"] *,
.btn-primary * {
  color: #ffffff !important;
}

/* Secondary Buttons (Sign In, Explore Demo, Contact Sales, Boutique Plan) */
[data-erp-login],
[data-erp-demo],
a[class*="bg-slate-900"],
a[class*="bg-slate-800"],
button[class*="bg-slate-800"],
button[class*="bg-slate-900"] {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-erp-login]:hover,
[data-erp-demo]:hover,
a[class*="bg-slate-900"]:hover,
a[class*="bg-slate-800"]:hover,
button[class*="bg-slate-800"]:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-erp-login] *,
[data-erp-demo] *,
a[class*="bg-slate-900"] *,
a[class*="bg-slate-800"] * {
  color: #0f172a !important;
}

/* ========================================================================= */
/* 7. ANNOUNCEMENT BAR & BADGES                                              */
/* ========================================================================= */
[data-cms-announcement],
.announcement-bar {
  background-image: linear-gradient(90deg, #eef2ff 0%, #f5f3ff 50%, #eff6ff 100%) !important;
  background-color: #eef2ff !important;
  border-bottom: 1px solid #c7d2fe !important;
  color: #3730a3 !important;
}
[data-cms-announcement] * {
  color: #3730a3 !important;
}
[data-cms-announcement] strong,
[data-cms-announcement] b {
  color: #1e1b4b !important;
}
[data-cms-announcement] a {
  color: #4f46e5 !important;
  font-weight: 700 !important;
}

/* Hero & Feature Pill Badges */
[data-cms-hero-badge],
div[class*="rounded-full"][class*="bg-indigo-950"],
span[class*="bg-indigo-950"] {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}
[data-cms-hero-badge] * {
  color: #4338ca !important;
}

span[class*="bg-emerald-950"],
div[class*="bg-emerald-950"] {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}

/* ========================================================================= */
/* 8. FORM INPUTS & INTERACTIVE ELEMENTS                                     */
/* ========================================================================= */
input, select, textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #4f46e5 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}
input::placeholder, textarea::placeholder {
  color: #94a3b8 !important;
}

/* ========================================================================= */
/* 9. GRID PATTERN, GLOWS & FOOTER                                           */
/* ========================================================================= */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(79, 70, 229, 0.09) 1px, transparent 0) !important;
  background-size: 24px 24px !important;
}

.glow-indigo {
  box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.1) !important;
}
.glow-purple {
  box-shadow: 0 10px 30px -5px rgba(124, 58, 237, 0.1) !important;
}
.glow-blue {
  box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.1) !important;
}

footer,
footer[class*="bg-slate-"] {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
footer * {
  color: #334155 !important;
}
footer a:hover {
  color: #4f46e5 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.transition-smooth {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}