/*
 * Telekom-inspired Theme Variables
 * Based on https://edp.buildth.ing Telekom Design System
 */

// Bootstrap/Docsy Variable Overrides (must be before imports)
$primary: #E20074 !default;
$secondary: #B6B6B6 !default;
$success: #00b367 !default;
$info: #0070ad !default;
$warning: #ffcc00 !default;
$danger: #d52b1e !default;
$dark: #000000 !default;
$light: #f9fafb !default;

// Link colors
$link-color: #E20074 !default;
$link-hover-color: #C2005E !default;

// Body
$body-bg: #ffffff !default;
$body-color: #000000 !default;

// Navbar
$navbar-light-color: #000000 !default;
$navbar-light-hover-color: #E20074 !default;
$navbar-light-active-color: #E20074 !default;

// Fonts
$font-family-sans-serif: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-base: $font-family-sans-serif !default;

// Telekom TeleNeo Fonts
@font-face {
  font-family: 'TeleNeo';
  src: url('../fonts/TeleNeoOffice-Thin.53627df9.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'TeleNeo';
  src: url('../fonts/TeleNeoOffice-Regular.b0a2cff1.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'TeleNeo';
  src: url('../fonts/TeleNeoOffice-Medium.79fb426d.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'TeleNeo';
  src: url('../fonts/TeleNeoOffice-Bold.a7bb592b.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'TeleNeo';
  src: url('../fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

// Primary Colors - Telekom Magenta
:root {
  // Telekom Primary Color (Magenta)
  --color-primary: #E20074;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #C2005E;
  --color-primary-dark-2: #A5004D;
  --color-primary-dark-3: #87003D;
  --color-primary-light-1: #E7338A;
  --color-primary-light-2: #EC66A1;
  --color-primary-light-3: #F299B8;
  --color-primary-light-4: #F7CCCF;
  --color-primary-light-5: #FCEFF6;
  --color-primary-light-6: #FFF5FA;
  
  // Secondary Colors
  --color-secondary: #B6B6B6;
  --color-secondary-dark: #6a7178;
  --color-secondary-light: #f9fafb;
  
  // Semantic Colors
  --color-success: #00b367;
  --color-warning: #ffcc00;
  --color-error: #d52b1e;
  --color-info: #0070ad;
  
  // Text Colors
  --color-text: #000000;
  --color-text-light: #666666;
  --color-text-dark: #000000;
  
  // Background Colors
  --color-body: #ffffff;
  --color-card: #F1F1F1;
  --color-hover: #F1F1F1;
  --color-active: #F1F1F1;
  
  // Navigation
  --color-nav-bg: #ffffff;
  --color-nav-text: #000000;
  --nav-border-color: #B6B6B6;
  
  // UI Elements
  --color-input-background: #ffffff;
  --color-input-border: #cccccc;
  --color-input-text: #000000;
  --color-box-body: #f2f2f2;
  --color-box-header: #e6e6e6;
  
  // Shadows & Overlays
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.5);
  
  // Font Settings
  --font-family-base: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-text-font-weight: 600;
}

// Apply TeleNeo font globally
body {
  font-family: var(--font-family-base);
}

// Dark Mode Support
@media (prefers-color-scheme: dark) {
  :root {
    // Primary Colors remain same
    --color-primary: #E20074;
    --color-primary-contrast: #000000;
    
    // Dark Mode Adjustments
    --color-primary-dark-1: #E7338A;
    --color-primary-dark-2: #EC66A1;
    --color-primary-light-1: #C2005E;
    --color-primary-light-2: #A5004D;
    
    // Secondary Colors for Dark Mode
    --color-secondary: #1c1c1e;
    --color-secondary-dark: #4D4D4D;
    --color-secondary-light: #0D0D0D;
    
    // Text Colors
    --color-text: #FFFFFF;
    --color-text-light: #CCCCCC;
    --color-text-dark: #FFFFFF;
    
    // Background Colors
    --color-body: #000000;
    --color-card: #1c1c1e;
    --color-hover: #1c1c1e;
    --color-active: #0D0D0D;
    
    // Navigation
    --color-nav-bg: #000000;
    --color-nav-text: #FFFFFF;
    
    // UI Elements
    --color-input-background: #1c1c1e;
    --color-input-border: #4D4D4D;
    --color-input-text: #FFFFFF;
    --color-box-body: #000000;
    --color-box-header: #1A1A1A;
    
    // Semantic Colors for Dark Mode
    --color-success: #00A94F;
    --color-warning: #FFCC00;
    --color-error: #D52B1E;
    --color-info: #0070AD;
    
    // Shadows
    --color-shadow: rgba(0, 0, 0, 0.35);
  }
}

// Telekom-inspired Component Styling
.td-navbar {
  background-color: var(--color-nav-bg) !important;
  border-bottom: 1px solid var(--nav-border-color);
  
  .navbar-brand,
  .nav-link {
    color: var(--color-nav-text) !important;
    font-weight: var(--nav-text-font-weight);
  }
  
  .nav-link:hover,
  .nav-link.active {
    color: var(--color-primary) !important;
    background: transparent !important;
  }
}

// Primary Buttons - Telekom Magenta
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  
  &:hover {
    background-color: var(--color-primary-dark-1) !important;
    border-color: var(--color-primary-dark-1) !important;
  }
  
  &:active,
  &:focus {
    background-color: var(--color-primary-dark-2) !important;
    border-color: var(--color-primary-dark-2) !important;
  }
}

// Links
a {
  color: var(--color-primary);
  
  &:hover {
    color: var(--color-primary-dark-1);
  }
}

// Cards with Telekom Style
.card {
  background-color: var(--color-card);
  border: 1px solid var(--nav-border-color);
  
  &:hover {
    background-color: var(--color-hover);
  }
}

// Active/Selected States - REMOVED harsh black backgrounds
// Now using soft Telekom colors instead

// Sidebar Navigation
.td-sidebar-nav {
  .td-sidebar-link {
    &:hover {
      background-color: var(--color-primary-light-5) !important;
      color: var(--color-primary) !important;
    }
    
    &.active {
      background-color: var(--color-primary-light-6);
      color: var(--color-primary);
      font-weight: 500;
      border-left: 3px solid var(--color-primary);
    }
  }
  
  // All list items in sidebar
  li a {
    &:hover {
      background-color: var(--color-primary-light-5) !important;
      color: var(--color-primary) !important;
    }
  }
}

// Main navigation tabs
.td-sidebar {
  .td-sidebar-nav__section {
    .ul-1 > li > a {
      &.active,
      &.td-sidebar-link--active {
        background-color: var(--color-primary-light-6) !important;
        color: var(--color-primary) !important;
        font-weight: 500;
        border-left: 3px solid var(--color-primary);
      }
      
      &:hover {
        background-color: var(--color-primary-light-5) !important;
        color: var(--color-primary) !important;
      }
    }
    
    // All nested levels
    li a:hover {
      background-color: var(--color-primary-light-5) !important;
      color: var(--color-primary) !important;
    }
  }
}

// Top navigation breadcrumb area
.td-sidebar__inner {
  .td-sidebar-nav__section-title {
    &.active {
      background-color: var(--color-primary-light-5) !important;
      color: var(--color-primary) !important;
    }
  }
}

// Breadcrumb navigation in header
.breadcrumb {
  .active {
    color: var(--color-primary) !important;
  }
  
  a:hover {
    color: var(--color-primary-dark-1) !important;
  }
}

// Remove harsh black backgrounds globally
.active,
.selected {
  background-color: var(--color-primary-light-6) !important;
  color: var(--color-primary) !important;
}

// Softer hover states
*:hover {
  transition: all 0.2s ease-in-out;
}

// Override any dark/black hover backgrounds in navigation
nav, .td-sidebar, .td-sidebar-nav {
  a:hover,
  li:hover > a,
  .nav-link:hover {
    background-color: var(--color-primary-light-5) !important;
    color: var(--color-primary) !important;
  }
}

// Code Blocks
pre,
code {
  background-color: var(--color-box-body);
  border: 1px solid var(--color-input-border);
}

// Inline code (backticks in text)
code {
  background-color: var(--color-primary-light-6);
  color: var(--color-primary-dark-2);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--color-primary-light-3);
  font-size: 0.9em;
}

// Code blocks (fenced code)
pre {
  background-color: var(--color-box-body);
  border: 1px solid var(--color-input-border);
  padding: 1rem;
  border-radius: 4px;
  
  code {
    background-color: transparent;
    border: none;
    padding: 0;
    color: inherit;
  }
}

// Tables
table {
  thead {
    background-color: var(--color-box-header);
  }
  
  tbody tr:hover {
    background-color: var(--color-hover);
  }
}

// Alerts/Notifications
.alert-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.alert-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: #000000;
}

.alert-danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.alert-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
}

// Docsy Homepage Components
.td-cover-block {
  background-color: var(--color-primary) !important;
  
  h1, h2, h3, h4, h5, h6, p {
    color: var(--color-primary-contrast) !important;
  }
}

.td-box {
  background-color: var(--color-card);
  border: 1px solid var(--nav-border-color);
  
  &:hover {
    background-color: var(--color-hover);
    border-color: var(--color-primary);
  }
  
  &--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
  }
  
  &--secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
  }
}

// Hero/Cover sections
.td-cover {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark-2) 100%);
  
  .display-1, .display-2, .display-3, .display-4 {
    color: var(--color-primary-contrast) !important;
  }
}

// Section backgrounds
.td-section {
  &--primary {
    background-color: var(--color-primary-light-6);
  }
  
  &--secondary {
    background-color: var(--color-secondary-light);
  }
}

// Feature boxes
.td-feature {
  border: 1px solid var(--nav-border-color);
  background-color: var(--color-card);
  
  &:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px var(--color-shadow);
  }
}