/**
 * KROT AI Design Tokens
 * Bootstrap 5.3 CSS Variables Override + Custom Properties
 *
 * Используем data-bs-theme="dark" для активации тёмной темы Bootstrap
 * и переопределяем стандартные переменные под наш дизайн
 */

/* ==========================================================================
   Bootstrap Dark Theme Override
   ========================================================================== */

[data-bs-theme="dark"] {
  /* Primary Colors - Cyan/Teal accent */
  --bs-primary: #06b6d4;
  --bs-primary-rgb: 6, 182, 212;

  /* Secondary - Purple */
  --bs-secondary: #8b5cf6;
  --bs-secondary-rgb: 139, 92, 246;

  /* Semantic Colors */
  --bs-success: #22c55e;
  --bs-success-rgb: 34, 197, 94;
  --bs-danger: #ef4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-info: #06b6d4;
  --bs-info-rgb: 6, 182, 212;

  /* Dark shades for backgrounds */
  --bs-dark: #0f172a;
  --bs-dark-rgb: 15, 23, 42;

  /* Body */
  --bs-body-bg: #0f172a;
  --bs-body-bg-rgb: 15, 23, 42;
  --bs-body-color: #f8fafc;
  --bs-body-color-rgb: 248, 250, 252;

  /* Secondary/Tertiary backgrounds */
  --bs-secondary-bg: #1e293b;
  --bs-secondary-bg-rgb: 30, 41, 59;
  --bs-tertiary-bg: #334155;
  --bs-tertiary-bg-rgb: 51, 65, 85;

  /* Text colors */
  --bs-emphasis-color: #f8fafc;
  --bs-emphasis-color-rgb: 248, 250, 252;
  --bs-secondary-color: #94a3b8;
  --bs-secondary-color-rgb: 148, 163, 184;
  --bs-tertiary-color: #64748b;
  --bs-tertiary-color-rgb: 100, 116, 139;

  /* Borders */
  --bs-border-color: rgba(148, 163, 184, 0.2);
  --bs-border-color-translucent: rgba(148, 163, 184, 0.15);

  /* Links */
  --bs-link-color: #06b6d4;
  --bs-link-color-rgb: 6, 182, 212;
  --bs-link-hover-color: #22d3ee;
  --bs-link-hover-color-rgb: 34, 211, 238;

  /* Headings */
  --bs-heading-color: #f8fafc;

  /* Focus ring */
  --bs-focus-ring-color: rgba(6, 182, 212, 0.25);

  /* Border radius - slightly larger for modern look */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-xxl: 1.5rem;
  --bs-border-radius-pill: 50rem;

  /* Shadows - darker for dark theme */
  --bs-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  --bs-box-shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.4);

  /* Card */
  --bs-card-bg: rgba(30, 41, 59, 0.8);
  --bs-card-border-color: rgba(148, 163, 184, 0.2);
  --bs-card-cap-bg: rgba(30, 41, 59, 0.9);

  /* Table */
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(148, 163, 184, 0.2);
  --bs-table-striped-bg: rgba(15, 23, 42, 0.3);
  --bs-table-hover-bg: rgba(6, 182, 212, 0.05);

  /* Form controls */
  --bs-form-control-bg: rgba(30, 41, 59, 0.5);

  /* Accordion */
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-bg: rgba(30, 41, 59, 0.5);
  --bs-accordion-active-bg: rgba(6, 182, 212, 0.1);
  --bs-accordion-active-color: #06b6d4;

  /* Glass effect */
  --krot-glass-bg: rgba(30, 41, 59, 0.8);
  --krot-glass-border: rgba(148, 163, 184, 0.2);
  --krot-glass-blur: 10px;
  --krot-glass-blur-strong: 20px;
  --krot-glass-bg-stronger: rgba(30, 41, 59, 0.9);
}

/* ==========================================================================
   Bootstrap Light Theme Override (Premium Tech/Clean)
   ========================================================================== */

[data-bs-theme="light"] {
  /* Primary Colors - Slightly darker for better contrast on white */
  --bs-primary: #0891b2; /* Cyan 600 */
  --bs-primary-rgb: 8, 145, 178;

  /* Secondary - Purple */
  --bs-secondary: #7c3aed; /* Violet 600 */
  --bs-secondary-rgb: 124, 58, 237;

  /* Semantic Colors */
  --bs-success: #16a34a; /* Green 600 */
  --bs-success-rgb: 22, 163, 74;
  --bs-danger: #dc2626; /* Red 600 */
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: #d97706; /* Amber 600 */
  --bs-warning-rgb: 217, 119, 6;
  --bs-info: #0891b2;
  --bs-info-rgb: 8, 145, 178;

  /* Light shades for backgrounds */
  --bs-light: #f8fafc;
  --bs-light-rgb: 248, 250, 252;

  /* Body - Clean Slate 50 */
  --bs-body-bg: #f8fafc;
  --bs-body-bg-rgb: 248, 250, 252;
  --bs-body-color: #334155; /* Slate 700 - Softer than 900 */
  --bs-body-color-rgb: 51, 65, 85;

  /* Secondary/Tertiary backgrounds */
  --bs-secondary-bg: #ffffff;
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: #f1f5f9; /* Slate 100 */
  --bs-tertiary-bg-rgb: 241, 245, 249;

  /* Text colors */
  --bs-emphasis-color: #1e293b; /* Slate 800 - Softer heading color */
  --bs-emphasis-color-rgb: 30, 41, 59;
  --bs-secondary-color: #64748b; /* Slate 500 */
  --bs-secondary-color-rgb: 100, 116, 139;
  --bs-tertiary-color: #94a3b8; /* Slate 400 */
  --bs-tertiary-color-rgb: 148, 163, 184;

  /* Borders */
  --bs-border-color: #e2e8f0; /* Slate 200 */
  --bs-border-color-translucent: rgba(148, 163, 184, 0.2);

  /* Links */
  --bs-link-color: #0891b2;
  --bs-link-color-rgb: 8, 145, 178;
  --bs-link-hover-color: #06b6d4;
  --bs-link-hover-color-rgb: 6, 182, 212;

  /* Headings */
  --bs-heading-color: #0f172a;

  /* Focus ring */
  --bs-focus-ring-color: rgba(8, 145, 178, 0.25);

  /* Border radius */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-xxl: 1.5rem;
  --bs-border-radius-pill: 50rem;

  /* Shadows - Soft colored shadows for light mode */
  --bs-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --bs-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Card - White with soft shadow */
  --bs-card-bg: rgba(255, 255, 255, 0.8);
  --bs-card-border-color: rgba(148, 163, 184, 0.2);
  --bs-card-cap-bg: rgba(255, 255, 255, 0.9);

  /* Table */
  --bs-table-bg: transparent;
  --bs-table-border-color: #e2e8f0;
  --bs-table-striped-bg: #f1f5f9;
  --bs-table-hover-bg: rgba(8, 145, 178, 0.05);

  /* Form controls */
  --bs-form-control-bg: #ffffff;

  /* Accordion */
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-bg: #ffffff;
  --bs-accordion-active-bg: rgba(8, 145, 178, 0.1);
  --bs-accordion-active-color: #0891b2;

  /* ==========================================================================
     KROT Custom Overrides for Light Mode
     ========================================================================== */
  
  /* Accent colors - slightly darker for contrast */
  --krot-accent: #0891b2;
  --krot-accent-light: #06b6d4;
  --krot-accent-glow: rgba(8, 145, 178, 0.25);
  --krot-accent-rgb: 8, 145, 178;

  --krot-purple: #7c3aed;
  --krot-purple-light: #8b5cf6;
  --krot-purple-glow: rgba(124, 58, 237, 0.25);
  --krot-purple-rgb: 124, 58, 237;

  /* Gradients - Lighter, cleaner */
  --krot-gradient-accent: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%);
  --krot-gradient-hero: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 40%, #f1f5f9 100%);

  /* Shadows - Diffuse colored shadows instead of glows */
  --krot-shadow-glow-accent: 0 10px 30px -5px rgba(8, 145, 178, 0.2);
  --krot-shadow-glow-purple: 0 10px 30px -5px rgba(124, 58, 237, 0.2);
  --krot-shadow-glow-danger: 0 10px 30px -5px rgba(220, 38, 38, 0.15);

  /* Glass effect - Frosted white */
  --krot-glass-bg: rgba(255, 255, 255, 0.7);
  --krot-glass-border: rgba(148, 163, 184, 0.2);
  --krot-glass-blur: 10px;
  --krot-glass-blur-strong: 20px;
  --krot-glass-bg-stronger: rgba(255, 255, 255, 0.9);

  /* Grid pattern - Dark lines on light bg */
  --krot-grid-pattern:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);

  /* Subtle accent backgrounds */
  --krot-accent-bg-subtle: rgba(8, 145, 178, 0.08);
  --krot-purple-bg-subtle: rgba(124, 58, 237, 0.08);

  /* Graphite Backgrounds -> White/Light Gray */
  --krot-bg-graphite: #ffffff;
  --krot-bg-graphite-rgb: 255, 255, 255;

  /* Specific Gradients */
  --krot-gradient-divider: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

/* ==========================================================================
   Custom Design Tokens (дополнительные к Bootstrap)
   ========================================================================== */

:root {
  /* Accent colors (extended) */
  --krot-accent: #06b6d4;
  --krot-accent-light: #22d3ee;
  --krot-accent-glow: rgba(6, 182, 212, 0.4);
  --krot-accent-rgb: 6, 182, 212;

  --krot-purple: #8b5cf6;
  --krot-purple-light: #a78bfa;
  --krot-purple-glow: rgba(139, 92, 246, 0.4);
  --krot-purple-rgb: 139, 92, 246;

  /* Gradients */
  --krot-gradient-accent: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  --krot-gradient-hero: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);

  /* Typography */
  --krot-font-primary: 'Inter', var(--bs-font-sans-serif);
  --krot-font-heading: 'Poppins', 'Inter', var(--bs-font-sans-serif);

  /* Spacing (additional to Bootstrap) */
  --krot-section-padding: 5rem;
  --krot-section-padding-sm: 3.75rem;

  /* Shadows with glow */
  --krot-shadow-glow-accent: 0 10px 30px rgba(6, 182, 212, 0.4);
  --krot-shadow-glow-purple: 0 10px 30px rgba(139, 92, 246, 0.4);

  /* Transitions */
  --krot-transition-fast: 0.2s ease;
  --krot-transition-base: 0.3s ease;
  --krot-transition-slow: 0.4s ease;

  /* Z-index scale */
  --krot-z-dropdown: 100;
  --krot-z-sticky: 200;
  --krot-z-fixed: 300;
  --krot-z-modal: 400;
  --krot-z-tooltip: 500;

  /* Grid pattern */
  --krot-grid-pattern:
    linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);

  /* Bento Grid specific */
  --krot-bento-gap: 1rem;
  --krot-bento-radius: var(--bs-border-radius-lg);

  /* Subtle accent backgrounds */
  --krot-accent-bg-subtle: rgba(6, 182, 212, 0.08);
  --krot-purple-bg-subtle: rgba(139, 92, 246, 0.08);

  /* Danger/Problem extended palette */
  --krot-danger-rgb: 239, 68, 68;
  --krot-orange-rgb: 245, 158, 11;
  --krot-gradient-danger: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
  --krot-shadow-glow-danger: 0 10px 30px rgba(239, 68, 68, 0.3);

  /* Graphite Backgrounds */
  --krot-bg-graphite: #1a1d23;
  --krot-bg-graphite-rgb: 26, 29, 35;

  /* Emerald (Security) */
  --krot-emerald: #10b981;
  --krot-emerald-dark: #059669;
  --krot-emerald-rgb: 16, 185, 129;

  /* Specific Gradients */
  --krot-gradient-divider: linear-gradient(90deg, #94a3b8, #475569);
  --krot-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* ==========================================================================
   Utility Classes (custom additions to Bootstrap)
   ========================================================================== */

/* Gradient text */
.text-gradient {
  background: var(--krot-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accent text color */
.text-accent {
  color: var(--krot-accent) !important;
}

/* Purple text color */
.text-purple {
  color: var(--krot-purple) !important;
}

/* Glass effect */
.glass {
  background: var(--krot-glass-bg);
  border: 1px solid var(--krot-glass-border);
}

/* Glow shadows */
.shadow-glow-accent {
  box-shadow: var(--krot-shadow-glow-accent);
}

.shadow-glow-purple {
  box-shadow: var(--krot-shadow-glow-purple);
}

/* Grid background pattern */
.bg-grid-pattern {
  background-image: var(--krot-grid-pattern);
  background-size: 50px 50px;
}

/* Font families */
.font-heading {
  font-family: var(--krot-font-heading);
}

/* Section padding */
.section-padding {
  padding-top: var(--krot-section-padding);
  padding-bottom: var(--krot-section-padding);
}

@media (max-width: 767.98px) {
  .section-padding {
    padding-top: var(--krot-section-padding-sm);
    padding-bottom: var(--krot-section-padding-sm);
  }
}