// =============================================================================
// NOIR THEME
// =============================================================================
// A sophisticated, elegant theme inspired by classic film noir aesthetics
// Features: Black/charcoal tones, warm gold accents, refined shadows, high contrast
// Based on Vona dashboard design patterns

// Light Mode Colors (clean, professional with dark nav)
$noir-light: (
  // Primary brand colors - warm gold accent
  'primary': #C9A962,
  'primary-hover': #B8943F,
  'primary-light': #FDF8ED,
  'secondary': #8B7355,

  // Status colors - muted elegance
  'success': #4A7C59,
  'warning': #D4A84B,
  'danger': #A65454,
  'info': #5B7B8C,

  // Backgrounds
  'bg-body': #F5F5F5,
  'bg-card': #FFFFFF,
  'bg-secondary': #EBEBEB,
  'bg-muted': #E0E0E0,
  'bg-input': #FFFFFF,

  // Text colors
  'text-primary': #1A1A1A,
  'text-secondary': #4A4A4A,
  'text-muted': #8A8A8A,
  'text-heading': #0D0D0D,

  // Borders
  'border-color': #D0D0D0,
  'border-light': #E8E8E8,

  // Shadows - subtle and refined
  'shadow-sm': 0 1px 3px rgba(0, 0, 0, 0.08),
  'shadow-md': 0 4px 12px rgba(0, 0, 0, 0.10),
  'shadow-lg': 0 8px 24px rgba(0, 0, 0, 0.12),

  // Navigation - dark sidebar
  'nav-bg': #1A1A1A,
  'nav-text': #B8B8B8,
  'nav-active': #C9A962,

  // Links
  'link-color': #9A7B3E,
  'link-hover': #C9A962,

  // Label/Badge variants
  'label-success-bg': #E8F0EA,
  'label-success-color': #3D6B4A,
  'label-warning-bg': #FDF5E6,
  'label-warning-color': #8B6914,
  'label-danger-bg': #F5E8E8,
  'label-danger-color': #8B3D3D,
  'label-info-bg': #E8EEF2,
  'label-info-color': #4A6575,
  'label-primary-bg': #FDF8ED,
  'label-primary-color': #8B6914,
  'label-secondary-bg': #F0EBE6,
  'label-secondary-color': #6B5A45,
  'label-dark-bg': #E8E8E8,
  'label-dark-color': #1A1A1A,
  'label-light-bg': #FAFAFA,
  'label-light-color': #4A4A4A
);

// Dark Mode Colors (true noir experience)
$noir-dark: (
  // Primary brand colors - luminous gold
  'primary': #D4B872,
  'primary-hover': #E5C983,
  'primary-light': #2A2215,
  'secondary': #A68B6D,

  // Status colors - rich tones
  'success': #6B9B7A,
  'warning': #E5B85C,
  'danger': #C76B6B,
  'info': #7B9BAC,

  // Backgrounds - deep charcoal
  'bg-body': #121212,
  'bg-card': #1E1E1E,
  'bg-secondary': #2A2A2A,
  'bg-muted': #333333,
  'bg-input': #1A1A1A,

  // Text colors - high contrast
  'text-primary': #F0F0F0,
  'text-secondary': #C8C8C8,
  'text-muted': #888888,
  'text-heading': #FFFFFF,

  // Borders
  'border-color': #3A3A3A,
  'border-light': #2A2A2A,

  // Shadows - subtle depth
  'shadow-sm': 0 2px 4px rgba(0, 0, 0, 0.3),
  'shadow-md': 0 4px 12px rgba(0, 0, 0, 0.4),
  'shadow-lg': 0 8px 24px rgba(0, 0, 0, 0.5),

  // Navigation
  'nav-bg': #0A0A0A,
  'nav-text': #A0A0A0,
  'nav-active': #D4B872,

  // Links
  'link-color': #D4B872,
  'link-hover': #E5C983,

  // Label/Badge variants
  'label-success-bg': #1A2B1F,
  'label-success-color': #6B9B7A,
  'label-warning-bg': #2B2415,
  'label-warning-color': #E5B85C,
  'label-danger-bg': #2B1A1A,
  'label-danger-color': #C76B6B,
  'label-info-bg': #1A232B,
  'label-info-color': #7B9BAC,
  'label-primary-bg': #2A2215,
  'label-primary-color': #D4B872,
  'label-secondary-bg': #231F1A,
  'label-secondary-color': #A68B6D,
  'label-dark-bg': #333333,
  'label-dark-color': #F0F0F0,
  'label-light-bg': #2A2A2A,
  'label-light-color': #C8C8C8
);

// Register the theme
$noir-theme: (
  'light': $noir-light,
  'dark': $noir-dark
);

@include register-theme('noir', $noir-theme);

// =============================================================================
// NOIR THEME STYLES
// =============================================================================

[data-skin="noir"] {
  @include apply-theme-variables('noir', 'light');

  // Body and base styles
  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  // Cards with refined shadows
  .uk-card {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--theme-shadow-sm);
    border-radius: 6px;

    &:hover {
      box-shadow: var(--theme-shadow-md);
    }
  }

  .uk-card-title {
    color: var(--theme-text-heading);
    font-weight: 600;
  }

  // Buttons with elegant styling
  .uk-button-primary {
    background-color: var(--theme-primary);
    color: #1A1A1A;
    font-weight: 600;
    border-radius: 4px;

    &:hover {
      background-color: var(--theme-primary-hover);
      box-shadow: 0 2px 8px rgba(201, 169, 98, 0.3);
    }
  }

  .uk-button-secondary {
    background-color: var(--theme-secondary);
    color: #FFFFFF;
    border-radius: 4px;

    &:hover {
      opacity: 0.9;
    }
  }

  .uk-button-default {
    background-color: var(--theme-bg-card);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
    border-radius: 4px;

    &:hover {
      background-color: var(--theme-bg-secondary);
      border-color: var(--theme-primary);
    }
  }

  // Form elements
  .uk-input, .uk-select, .uk-textarea {
    background-color: var(--theme-bg-input);
    border: 1px solid var(--theme-border-color);
    color: var(--theme-text-primary);
    border-radius: 4px;

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 2px rgba(201, 169, 98, 0.2);
    }
  }

  // Navigation
  .uk-navbar-container {
    background-color: var(--theme-nav-bg);
  }

  // Tables
  .uk-table th {
    color: var(--theme-text-heading);
    border-bottom: 2px solid var(--theme-border-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

  .uk-table td {
    border-bottom-color: var(--theme-border-light);
  }

  // Labels and badges
  .uk-label {
    font-weight: 600;
    border-radius: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
  }

  // Links
  a {
    color: var(--theme-link-color);
    transition: color 0.2s ease;

    &:hover {
      color: var(--theme-link-hover);
    }
  }

  // Headings
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
    font-weight: 600;
  }

  // Alerts
  .uk-alert-success {
    background-color: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
    border-radius: 4px;
  }

  .uk-alert-warning {
    background-color: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
    border-radius: 4px;
  }

  .uk-alert-danger {
    background-color: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
    border-radius: 4px;
  }

  // Tabs
  .uk-tab > * > a {
    color: var(--theme-text-secondary);
    font-weight: 500;

    &:hover {
      color: var(--theme-primary);
    }
  }

  .uk-tab > .uk-active > a {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
  }
}

// Dark mode variant
[data-skin="noir"][data-theme="dark"] {
  @include apply-theme-variables('noir', 'dark');

  // Body
  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
  }

  // Headings
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
  }

  // Header
  header {
    background: var(--theme-bg-card) !important;
    border-bottom-color: var(--theme-border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  // Cards
  .uk-card {
    background-color: var(--theme-bg-card);
    border-color: var(--theme-border-color);
    box-shadow: var(--theme-shadow-sm);

    &:hover {
      box-shadow: var(--theme-shadow-md);
      border-color: var(--theme-primary);
    }
  }

  .uk-card-title {
    color: var(--theme-text-heading);
  }

  .uk-card-secondary {
    background-color: var(--theme-bg-secondary);
  }

  // Dropdowns
  .uk-dropdown {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--theme-shadow-lg);
    border-radius: 6px;
  }

  .uk-dropdown-nav > li > a {
    color: var(--theme-text-secondary);

    &:hover {
      color: var(--theme-primary);
    }
  }

  .uk-nav-header {
    color: var(--theme-text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .uk-nav-divider {
    border-top-color: var(--theme-border-color);
  }

  // Buttons
  .uk-button-primary {
    background-color: var(--theme-primary);
    color: #1A1A1A;

    &:hover {
      background-color: var(--theme-primary-hover);
      box-shadow: 0 2px 12px rgba(212, 184, 114, 0.4);
    }
  }

  .uk-button-default {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border-color: var(--theme-border-color);

    &:hover {
      background-color: var(--theme-bg-muted);
      border-color: var(--theme-primary);
    }
  }

  // Form elements
  .uk-input, .uk-select, .uk-textarea {
    background-color: var(--theme-bg-input);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 2px rgba(212, 184, 114, 0.25);
    }

    &::placeholder {
      color: var(--theme-text-muted);
    }
  }

  // Tables
  .uk-table th {
    color: var(--theme-text-heading);
    background-color: var(--theme-bg-secondary);
    border-bottom-color: var(--theme-border-color);
  }

  .uk-table td {
    color: var(--theme-text-primary);
    border-bottom-color: var(--theme-border-light);
  }

  .uk-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--theme-bg-secondary);
  }

  .uk-table-hover tbody tr:hover {
    background-color: var(--theme-bg-muted);
  }

  // Links
  a {
    color: var(--theme-link-color);

    &:hover {
      color: var(--theme-link-hover);
    }
  }

  // Tabs
  .uk-tab > * > a {
    color: var(--theme-text-secondary);
    border-bottom-color: transparent;

    &:hover {
      color: var(--theme-primary);
      border-bottom-color: var(--theme-primary);
    }
  }

  .uk-tab > .uk-active > a {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
  }

  // Badges
  .uk-badge {
    background-color: var(--theme-primary);
    color: #1A1A1A;
  }

  // Alerts
  .uk-alert {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border-radius: 4px;
  }

  .uk-alert-success {
    background-color: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
  }

  .uk-alert-warning {
    background-color: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
  }

  .uk-alert-danger {
    background-color: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
  }

  // Modals
  .uk-modal-dialog {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 8px;
  }

  .uk-modal-header {
    background-color: var(--theme-bg-card);
    border-bottom-color: var(--theme-border-color);
  }

  .uk-modal-footer {
    background-color: var(--theme-bg-card);
    border-top-color: var(--theme-border-color);
  }

  .uk-modal-title {
    color: var(--theme-text-heading);
  }

  // Text utilities
  .uk-text-muted {
    color: var(--theme-text-muted) !important;
  }

  .uk-text-meta {
    color: var(--theme-text-muted);
  }

  // Horizontal rules
  hr, .uk-hr {
    border-top-color: var(--theme-border-color);
  }

  // Offcanvas
  .uk-offcanvas-bar {
    background-color: var(--theme-nav-bg);
  }

  // Sticky header
  [uk-sticky].uk-active {
    background-color: var(--theme-bg-card) !important;
  }

  // Progress bars
  .uk-progress {
    background-color: var(--theme-bg-muted);
  }

  .uk-progress::-webkit-progress-value {
    background-color: var(--theme-primary);
  }

  .uk-progress::-moz-progress-bar {
    background-color: var(--theme-primary);
  }
}