/* ==========================================================================
   OGNER — DARK MODE
   --------------------------------------------------------------------------
   Loaded AFTER light styles so its overrides win the cascade.
   Auto-applied via:
     - <html class="dark">
     - [data-theme="dark"]
     - @media (prefers-color-scheme: dark) on :root (optional)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DARK MODE TOKENS
   -------------------------------------------------------------------------- */
.dark,
[data-theme="dark"] {
  /* Primary — Deep Navy "Sentinel" (inverted) */
  --primary:                #b0c7f2;
  --primary-container:      #003265;
  --on-primary:             #003265;
  --on-primary-container:   #d5e3ff;
  --primary-fixed:          #d5e3ff;
  --primary-fixed-dim:      #b0c7f2;
  --on-primary-fixed:       #001b3c;
  --on-primary-fixed-variant:#30476b;
  --inverse-primary:        #00030c;

  /* Secondary */
  --secondary:                #a0caff;
  --secondary-container:      #00497e;
  --on-secondary:             #003258;
  --on-secondary-container:   #d2e4ff;
  --secondary-fixed:          #d2e4ff;
  --secondary-fixed-dim:      #a0caff;
  --on-secondary-fixed:       #001c37;
  --on-secondary-fixed-variant:#00497e;

  /* Tertiary / Gold */
  --tertiary:                #ffba47;
  --tertiary-container:      #614000;
  --on-tertiary:             #402800;
  --on-tertiary-container:   #ffddb0;
  --tertiary-fixed:          #ffddb0;
  --tertiary-fixed-dim:      #ffba47;
  --on-tertiary-fixed:       #291800;
  --on-tertiary-fixed-variant:#614000;

  --kinetic-gold: #fdad01;
  --kinetic-gold-bright: #ffba47;

  /* Surfaces — Deep Neutrals */
  --background:                 #0f1115;
  --on-background:              #e2e2e9;
  --surface:                    #0f1115;
  --surface-dim:                #0a0c10;
  --surface-bright:             #353940;
  --surface-variant:            #44474e;
  --surface-container-lowest:   #0a0c10;
  --surface-container-low:      #1a1d22;
  --surface-container:          #1e2126;
  --surface-container-high:     #292c33;
  --surface-container-highest:  #34373e;
  --surface-tint:               #b0c7f2;
  --on-surface:                 #e2e2e9;
  --on-surface-variant:         #c4c6cf;
  --inverse-surface:            #e2e2e9;
  --inverse-on-surface:         #2e3034;

  /* Outline */
  --outline:         #8e9099;
  --outline-variant: #44474e;
  --outline-focus:   #b0c7f2;

  /* Status */
  --success:               #7ad6a3;
  --success-container:     #005223;
  --on-success:            #00391c;
  --on-success-container:  #c8efd0;

  --warning:               #ff9166;
  --warning-container:     #6f2700;
  --on-warning:            #522300;
  --on-warning-container:  #ffdcc2;

  --error:                 #ffb4ab;
  --error-container:       #690005;
  --on-error:              #690005;
  --on-error-container:    #ffdad6;

  --info:                  #a0caff;
  --info-container:        #00497e;
  --on-info:               #003258;
  --on-info-container:     #d2e4ff;

  /* Shadows — Deeper in dark mode */
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.30);
  --shadow:     0 2px 4px 0 rgba(0, 0, 0, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.20);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.30);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.60), 0 8px 10px -6px rgba(0, 0, 0, 0.30);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.70);

  --shadow-tonal-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-tonal-2: 0 1px 2px 0 rgba(0, 0, 0, 0.50), 0 2px 6px 2px rgba(0, 0, 0, 0.30);
  --shadow-tonal-3: 0 4px 8px 3px rgba(0, 0, 0, 0.50), 0 1px 3px 0 rgba(0, 0, 0, 0.40);
  --shadow-tonal-4: 0 6px 10px 4px rgba(0, 0, 0, 0.50), 0 2px 3px 0 rgba(0, 0, 0, 0.40);
  --shadow-tonal-5: 0 8px 12px 6px rgba(0, 0, 0, 0.50), 0 4px 4px 0 rgba(0, 0, 0, 0.40);

  --shadow-focus-primary:   0 0 0 3px rgba(176, 199, 242, 0.30);
  --shadow-focus-secondary: 0 0 0 3px rgba(160, 202, 255, 0.30);
  --shadow-focus-success:   0 0 0 3px rgba(122, 214, 163, 0.30);
  --shadow-focus-warning:   0 0 0 3px rgba(255, 145, 102, 0.30);
  --shadow-focus-error:     0 0 0 3px rgba(255, 180, 171, 0.30);

  /* Gradients */
  --gradient-gold:         linear-gradient(135deg, #fdad01 0%, #ffba47 100%);
  --gradient-gold-shimmer: linear-gradient(90deg, #fdad01 0%, #ffddb0 50%, #fdad01 100%);
  --gradient-primary:      linear-gradient(135deg, #b0c7f2 0%, #003265 100%);
  --gradient-glass:        linear-gradient(135deg, rgba(26, 28, 31, 0.7) 0%, rgba(26, 28, 31, 0.3) 100%);
  --gradient-hero:         linear-gradient(135deg, #0f1115 0%, #1a1d22 50%, #003265 100%);

  /* Scrollbar */
  --scrollbar-thumb:       #44474e;
  --scrollbar-thumb-hover: #8e9099;

  /* Selection */
  --selection-bg: var(--secondary-container);
  --selection-fg: var(--on-secondary-container);

  color-scheme: dark;
}


/* --------------------------------------------------------------------------
   2. DARK-MODE COMPONENT OVERRIDES
   -------------------------------------------------------------------------- */
.dark .k-bg-card,
.dark .k-card,
.dark .k-card-elevated,
.dark .k-card-interactive,
.dark .k-modal,
.dark .k-drawer,
.dark .k-bottom-sheet,
.dark .k-table-wrap,
.dark .k-dropdown-menu,
.dark .k-popover-content,
.dark .k-context-menu,
.dark .k-command-palette {
  background: var(--surface-container-low);
  border-color: var(--outline-variant);
}

.dark .k-topbar,
.dark .k-sidebar {
  background: var(--surface-container-lowest);
  border-color: var(--outline-variant);
}

.dark .k-table thead th {
  background: var(--surface-container);
  color: var(--on-surface-variant);
}
.dark .k-table tbody tr:hover { background: var(--surface-container); }
.dark .k-table tbody td { border-color: var(--outline-variant); }

.dark .k-modal-backdrop,
.dark .k-drawer-backdrop,
.dark .k-bottom-sheet-backdrop,
.dark .k-command-palette-backdrop {
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(6px);
}

.dark .k-tooltip-content {
  background: var(--surface-container-highest);
  color: var(--on-surface);
}
.dark .k-tooltip-content::after {
  border-top-color: var(--surface-container-highest);
}
.dark .k-tooltip-bottom .k-tooltip-content::after {
  border-bottom-color: var(--surface-container-highest);
}

.dark .k-glass {
  background: rgba(26, 28, 31, 0.60);
  border-color: rgba(196, 198, 207, 0.10);
}
.dark .k-glass-strong {
  background: rgba(26, 28, 31, 0.78);
}
.dark .k-glass-light {
  background: rgba(26, 28, 31, 0.40);
}

.dark .k-btn-gold {
  color: #1a1300;
}

.dark .k-input,
.dark .k-textarea,
.dark .k-select {
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.dark .k-input::placeholder,
.dark .k-textarea::placeholder { color: var(--on-surface-variant); }

.dark .k-checkbox,
.dark .k-radio {
  background: var(--surface-container-lowest);
  border-color: var(--outline);
}

.dark .k-otp-input {
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}

.dark .k-card-bento { background: var(--surface-container-low); }
.dark .k-card-bento-feature {
  background: var(--gradient-gold);
  color: #1a1300;
}

.dark .k-pricing-card { background: var(--surface-container-low); }

.dark .k-input-search {
  background: var(--surface-container);
}

.dark .k-breadcrumb-item a { color: var(--on-surface-variant); }
.dark .k-breadcrumb-item a:hover { color: var(--primary); }

.dark .k-pagination-item:hover { background: var(--surface-container-high); }

.dark .k-tabs-pills .k-tabs-list {
  background: var(--surface-container);
}

.dark .k-tag { background: var(--surface-container); }

.dark .k-sidebar-item.is-active { background: var(--surface-container-high); }
.dark .k-sidebar-item:hover { background: var(--surface-container); }

.dark .k-chat {
  background: var(--surface-container-low);
}
.dark .k-chat-bubble {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

.dark .k-stepper-circle {
  background: var(--surface-container);
  border-color: var(--outline);
}

.dark .k-timeline-content {
  background: var(--surface-container);
}

.dark .k-kpi {
  background: var(--surface-container-low);
}

.dark .k-spinner { color: var(--primary); }

.dark .k-empty-state-icon { background: var(--surface-container-high); }

.dark .k-divider { background: var(--outline-variant); }


/* --------------------------------------------------------------------------
   3. SYSTEM PREFERENCE
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    color-scheme: dark;
  }
}


/* --------------------------------------------------------------------------
   4. TRANSITION BETWEEN THEMES
   -------------------------------------------------------------------------- */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 200ms var(--ease-default),
              color 200ms var(--ease-default),
              border-color 200ms var(--ease-default);
}