/* ==========================================================================
   OFFICIAL BRAND PALETTE & THEME SYSTEM: SIDAYA BY ASHVIN LABS IDN
   ========================================================================== */
:root {
  /* 🎨 Core Brand Palette Tokens (From Design System) */
  --brand-midnight: #090D1B;      /* Midnight Edition */
  --brand-dark-knight: #12182B;    /* Dark Knight */
  --brand-masquerade: #262E4B;     /* Midnight Masquerade */
  --brand-warm-blue: #5048E5;      /* Warm Blue (Royal Indigo) */
  --brand-secret-mana: #3660FF;    /* Secret of Mana (Electric Cobalt) */
  --brand-orchid: #828DF8;         /* Orchid (Soft Violet Glow) */
  --brand-fennel: #10B77F;         /* Fennel Fiesta (Emerald Green) */
  --brand-envy-love: #36D399;      /* Envy's Love (Mint Green Accent) */
  --brand-dr-white: #F8FAFC;       /* Dr. White */
  --brand-ephemeral: #CBD5E1;      /* Ephemeral Blue (Cool Silver) */

  --theme-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
}

/* ☀️ LIGHT THEME (Clean, Crisp High-Contrast Commerce) */
html[data-theme="light"] {
  --bg-body: var(--brand-dr-white);              /* #F8FAFC */
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --bg-surface-soft: var(--brand-dr-white);
  --bg-sidebar: #FFFFFF;
  
  --border-subtle: var(--brand-ephemeral);        /* #CBD5E1 */
  --border-medium: #94A3B8;
  --border-focus: var(--brand-secret-mana);       /* #3660FF */

  --text-primary: var(--brand-midnight);         /* #090D1B */
  --text-secondary: var(--brand-masquerade);     /* #262E4B */
  --text-muted: #64748B;
  --text-inverse: var(--brand-dr-white);

  --primary: var(--brand-secret-mana);           /* #3660FF */
  --primary-hover: var(--brand-warm-blue);       /* #5048E5 */
  --primary-soft: rgba(54, 96, 255, 0.08);
  --primary-border: rgba(54, 96, 255, 0.25);
  --primary-glow: rgba(54, 96, 255, 0.18);

  --accent-green: var(--brand-fennel);           /* #10B77F */
  --accent-green-soft: rgba(16, 183, 127, 0.10);
  --accent-green-border: var(--brand-envy-love); /* #36D399 */

  --accent-amber: #D97706;
  --accent-amber-soft: #FFFBEB;
  --accent-amber-border: #FDE68A;

  --accent-purple: var(--brand-warm-blue);       /* #5048E5 */
  --accent-purple-soft: rgba(80, 72, 229, 0.08);
  --accent-orchid: var(--brand-orchid);          /* #828DF8 */

  --accent-rose: #E11D48;
  --accent-rose-soft: #FFF1F2;

  --card-shadow: 0 4px 16px -2px rgba(9, 13, 27, 0.06), 0 2px 6px -1px rgba(9, 13, 27, 0.04);
  --card-shadow-hover: 0 10px 25px -4px rgba(9, 13, 27, 0.10), 0 4px 10px -2px rgba(9, 13, 27, 0.06);
  --dock-shadow: 0 12px 36px -4px rgba(9, 13, 27, 0.14), 0 4px 12px -2px rgba(9, 13, 27, 0.08);
  --topbar-bg: rgba(248, 250, 252, 0.92);
}

/* 🌙 DARK THEME (Sleek Obsidian Executive Midnight) */
html[data-theme="dark"] {
  --bg-body: var(--brand-midnight);              /* #090D1B */
  --bg-surface: var(--brand-dark-knight);         /* #12182B */
  --bg-surface-elevated: var(--brand-masquerade);/* #262E4B */
  --bg-surface-soft: var(--brand-dark-knight);
  --bg-sidebar: var(--brand-midnight);           /* #090D1B */

  --border-subtle: rgba(203, 213, 225, 0.10);
  --border-medium: var(--brand-masquerade);      /* #262E4B */
  --border-focus: var(--brand-secret-mana);      /* #3660FF */

  --text-primary: var(--brand-dr-white);         /* #F8FAFC */
  --text-secondary: var(--brand-ephemeral);      /* #CBD5E1 */
  --text-muted: var(--brand-orchid);             /* #828DF8 */
  --text-inverse: var(--brand-midnight);

  --primary: var(--brand-secret-mana);           /* #3660FF */
  --primary-hover: var(--brand-warm-blue);       /* #5048E5 */
  --primary-soft: rgba(54, 96, 255, 0.16);
  --primary-border: rgba(54, 96, 255, 0.35);
  --primary-glow: rgba(54, 96, 255, 0.35);

  --accent-green: var(--brand-fennel);           /* #10B77F */
  --accent-green-soft: rgba(16, 183, 127, 0.16);
  --accent-green-border: rgba(54, 211, 153, 0.35); /* #36D399 */

  --accent-amber: #F59E0B;
  --accent-amber-soft: rgba(245, 158, 11, 0.15);
  --accent-amber-border: rgba(245, 158, 11, 0.35);

  --accent-purple: var(--brand-warm-blue);       /* #5048E5 */
  --accent-purple-soft: rgba(80, 72, 229, 0.16);
  --accent-orchid: var(--brand-orchid);          /* #828DF8 */

  --accent-rose: #F43F5E;
  --accent-rose-soft: rgba(244, 63, 94, 0.15);

  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.45), 0 2px 8px -1px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 12px 30px -4px rgba(0, 0, 0, 0.60), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
  --dock-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.7);
  --topbar-bg: rgba(9, 13, 27, 0.92);
}

/* ==========================================================================
   THEME-ADAPTIVE BRAND ASSETS UTILITIES
   ========================================================================== */
.brand-logo-horizontal {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.brand-logo-horizontal:hover {
  transform: scale(1.02);
}

/* Light Theme Visibility */
html[data-theme="light"] .dark-theme-logo {
  display: none !important;
}
html[data-theme="light"] .light-theme-logo {
  display: block !important;
}

/* Dark Theme Visibility */
html[data-theme="dark"] .light-theme-logo {
  display: none !important;
}
html[data-theme="dark"] .dark-theme-logo {
  display: block !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition: var(--theme-transition);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}