/*
 * INTcoin Website - Theme System
 * Official Brand Colors from INTcoin Brand Guidelines v2.0
 * Copyright (c) 2026 INTcoin Core Development Team
 */

/* ============================================
   LIGHT THEME (Default)
   ============================================ */
:root {
  /* Primary Brand Colors - Quantum Blue */
  --color-brand-primary: #0066cc;
  --color-brand-primary-dark: #004d99;
  --color-brand-primary-light: #3399ff;

  /* Primary Brand Colors - Deep Purple */
  --color-brand-secondary: #5a21b6;
  --color-brand-secondary-dark: #3c0f7c;
  --color-brand-secondary-light: #8b5cf6;

  /* Brand Gradients */
  --gradient-brand: linear-gradient(135deg, #0066cc 0%, #0055cc 50%, #5a21b6 100%);
  --gradient-shield: linear-gradient(180deg, #5a21b6 0%, #3c0f7c 100%);

  /* Accent Color */
  --color-accent: #0a7d3e;

  /* Backgrounds - Light Theme */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-card: #ffffff;
  --color-bg-hover: #f1f5f9;
  --color-bg-active: #e2e8f0;

  /* Text Colors - High Contrast */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border-light: #e2e8f0;
  --color-border-medium: #cbd5e1;
  --color-border-dark: #94a3b8;

  /* Semantic Colors - High Contrast */
  --color-success: #0a7d3e;
  --color-success-dark: #065a2d;
  --color-success-light: #10b75f;
  --color-warning: #b45309;
  --color-warning-dark: #92400e;
  --color-warning-light: #f59e0b;
  --color-error: #c81e1e;
  --color-error-dark: #991b1b;
  --color-error-light: #ef4444;
  --color-info: #0369a1;
  --color-info-dark: #075985;
  --color-info-light: #0ea5e9;

  /* Focus Indicators - High Visibility */
  --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.5);
  --focus-ring-error: 0 0 0 3px rgba(200, 30, 30, 0.5);
  --focus-ring-success: 0 0 0 3px rgba(10, 125, 62, 0.5);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Glows */
  --glow-blue: 0 0 16px rgba(0, 102, 204, 0.2);
  --glow-purple: 0 0 16px rgba(90, 33, 182, 0.2);

  /* Spacing (8px base unit) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-indexes */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
  /* Brand Colors (adjusted for dark mode) */
  --color-brand-primary: #3399ff;
  --color-brand-primary-dark: #0066cc;
  --color-brand-primary-light: #66b3ff;
  --color-brand-secondary: #8b5cf6;
  --color-brand-secondary-dark: #5a21b6;
  --color-brand-secondary-light: #a78bfa;

  /* Brand Gradients - Light variants for dark backgrounds */
  --gradient-brand: linear-gradient(135deg, #3399ff 0%, #66b3ff 50%, #8b5cf6 100%);
  --gradient-shield: linear-gradient(180deg, #8b5cf6 0%, #5a21b6 100%);

  /* Accent Color */
  --color-accent: #10b75f;

  /* Backgrounds - True dark for OLED */
  --color-bg-primary: #0a0f1e;
  --color-bg-secondary: #141b2e;
  --color-bg-tertiary: #1e2842;
  --color-bg-card: #141b2e;
  --color-bg-hover: #1e2842;
  --color-bg-active: #334155;

  /* Text Colors - High Contrast */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-inverse: #0f172a;

  /* Borders */
  --color-border-light: #334155;
  --color-border-medium: #475569;
  --color-border-dark: #64748b;

  /* Semantic Colors (adjusted for dark backgrounds) */
  --color-success: #10b75f;
  --color-success-dark: #0a7d3e;
  --color-success-light: #34d399;
  --color-warning: #f59e0b;
  --color-warning-dark: #b45309;
  --color-warning-light: #fbbf24;
  --color-error: #ef4444;
  --color-error-dark: #c81e1e;
  --color-error-light: #f87171;
  --color-info: #0ea5e9;
  --color-info-dark: #0369a1;
  --color-info-light: #38bdf8;

  /* Shadows (darker for dark mode) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);

  /* Glows - More visible on dark */
  --glow-blue: 0 0 20px rgba(51, 153, 255, 0.3);
  --glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --color-brand-primary: #004d99;
    --color-brand-secondary: #3c0f7c;
    --color-text-primary: #000000;
    --color-bg-primary: #ffffff;
    --color-border-light: #000000;
    --gradient-brand: #004d99;
  }

  [data-theme="dark"] {
    --color-text-primary: #ffffff;
    --color-bg-primary: #000000;
    --color-border-light: #ffffff;
  }
}

/* ============================================
   THEME TRANSITION
   ============================================ */
html {
  transition: background-color var(--transition-base), color var(--transition-base);
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Smooth transitions for themed elements */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: var(--transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on page load */
.no-transition * {
  transition: none !important;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   FOCUS VISIBLE - Keyboard Navigation
   ============================================ */
*:focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   SCREEN READER ONLY
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}