/* ==============================================
 * BJJ Video Analyzer - Global Color System
 * Auto-generated from apps/videos/utils/colors.py
 * Do not edit manually.
 * Regenerate with: python manage.py generate_design_tokens
 * See PRD-0034 for design token specification.
 * ============================================== */

:root {
  /* ---- Raw color scales ---- */
  --brand-50: #F5F3FF;
  --brand-100: #EDE9FE;
  --brand-200: #DDD6FE;
  --brand-400: #A78BFA;
  --brand-500: #8B5CF6;
  --brand-600: #7C3AED;
  --brand-700: #6D28D9;
  --brand-900: #4C1D95;

  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAFA;
  --neutral-100: #F4F4F5;
  --neutral-200: #E4E4E7;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-900: #18181B;

  --success-50: #F0FDF4;
  --success-100: #DCFCE7;
  --success-600: #16A34A;
  --success-700: #15803D;
  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --danger-50: #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;
  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-600: #2563EB;
  --info-700: #1D4ED8;

  /* ---- BJJ term colors ---- */
  --term-technique: #4F46E5;
  --term-technique-bg: rgba(79, 70, 229, 0.1);
  --term-position:  #15803D;
  --term-position-bg: rgba(21, 128, 61, 0.1);
  --term-mechanic:  #71717A;
  --term-mechanic-bg: rgba(113, 113, 122, 0.1);
  --term-phase:     #7C3AED;
  --term-phase-bg:  rgba(124, 58, 237, 0.1);

  /* ---- Semantic layer (dark-mode swap point) ---- */
  /* Surfaces */
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-overlay: var(--neutral-0);

  /* Text */
  --text-heading: var(--neutral-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-subtle: var(--neutral-400);
  --text-on-brand: #ffffff;

  /* Borders / dividers */
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-divider: var(--neutral-100);

  /* Focus ring */
  --ring-color: var(--brand-600);
  --ring-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --text-display-size: 32px;
  --text-display-weight: 700;
  --text-display-line: 1.2;
  --text-h1-size: 24px;
  --text-h1-weight: 700;
  --text-h1-line: 1.3;
  --text-h2-size: 20px;
  --text-h2-weight: 600;
  --text-h2-line: 1.4;
  --text-h3-size: 16px;
  --text-h3-weight: 600;
  --text-h3-line: 1.4;
  --text-body-size: 15px;
  --text-body-weight: 400;
  --text-body-line: 1.5;
  --text-body-sm-size: 13px;
  --text-body-sm-weight: 400;
  --text-body-sm-line: 1.5;
  --text-caption-size: 12px;
  --text-caption-weight: 500;
  --text-caption-line: 1.4;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---- Shadow ---- */
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-sm: 0 2px 4px rgba(24, 24, 27, 0.06);
  --shadow-md: 0 4px 12px rgba(24, 24, 27, 0.08);
  --shadow-lg: 0 8px 24px rgba(24, 24, 27, 0.10);

  /* ---- Spacing ---- */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---- Legacy compatibility ---- */
  /* Brand alias (legacy) */
  --brand-primary: var(--brand-600);
  --brand-primary-dark: var(--brand-700);
  --brand-primary-light: var(--brand-200);

  /* Content type colors (legacy compat — keep names stable) */
  --color-videos: #2563EB;
  --color-videos-hover: #1D4ED8;
  --color-videos-light: #EFF6FF;
  --color-techniques: #4F46E5;
  --color-techniques-hover: #4338CA;
  --color-techniques-light: #EEF2FF;
  --color-positions: #15803D;
  --color-positions-hover: #16A34A;
  --color-positions-light: #F0FDF4;
  --color-phases: #7C3AED;
  --color-phases-hover: #6D28D9;
  --color-phases-light: #F5F3FF;
  --color-mechanics: #71717A;
  --color-mechanics-hover: #52525B;
  --color-mechanics-light: #F4F4F5;

  /* Status colors (legacy compat) */
  --color-success: var(--success-600);
  --color-warning: var(--warning-600);
  --color-danger:  var(--danger-600);
  --color-info:    var(--info-600);

  /* Neutrals (legacy compat) */
  --color-light:  var(--neutral-50);
  --color-medium: var(--neutral-500);
  --color-dark:   var(--neutral-900);
  --color-white:  var(--neutral-0);

  /* Border / surface (legacy compat) */
  --border-color:        var(--color-border);
  --border-color-light:  var(--color-divider);
  --surface-color:           var(--surface-card);
  --surface-color-secondary: var(--surface-page);
}

.text-videos { color: var(--color-videos) !important; }
.text-videos-hover:hover { color: var(--color-videos-hover) !important; }
.bg-videos { background-color: var(--color-videos) !important; }
.bg-videos-light { background-color: var(--color-videos-light) !important; }
.border-videos { border-color: var(--color-videos) !important; }

.text-techniques { color: var(--color-techniques) !important; }
.text-techniques-hover:hover { color: var(--color-techniques-hover) !important; }
.bg-techniques { background-color: var(--color-techniques) !important; }
.bg-techniques-light { background-color: var(--color-techniques-light) !important; }
.border-techniques { border-color: var(--color-techniques) !important; }

.text-positions { color: var(--color-positions) !important; }
.text-positions-hover:hover { color: var(--color-positions-hover) !important; }
.bg-positions { background-color: var(--color-positions) !important; }
.bg-positions-light { background-color: var(--color-positions-light) !important; }
.border-positions { border-color: var(--color-positions) !important; }

.text-phases { color: var(--color-phases) !important; }
.text-phases-hover:hover { color: var(--color-phases-hover) !important; }
.bg-phases { background-color: var(--color-phases) !important; }
.bg-phases-light { background-color: var(--color-phases-light) !important; }
.border-phases { border-color: var(--color-phases) !important; }

.text-mechanics { color: var(--color-mechanics) !important; }
.text-mechanics-hover:hover { color: var(--color-mechanics-hover) !important; }
.bg-mechanics { background-color: var(--color-mechanics) !important; }
.bg-mechanics-light { background-color: var(--color-mechanics-light) !important; }
.border-mechanics { border-color: var(--color-mechanics) !important; }

.btn-videos {
  background-color: var(--color-videos);
  border-color: var(--color-videos);
  color: white;
}
.btn-videos:hover {
  background-color: var(--color-videos-hover);
  border-color: var(--color-videos-hover);
  color: white;
}
.btn-outline-videos {
  color: var(--color-videos);
  border-color: var(--color-videos);
}
.btn-outline-videos:hover {
  background-color: var(--color-videos);
  border-color: var(--color-videos);
  color: white;
}

.btn-techniques {
  background-color: var(--color-techniques);
  border-color: var(--color-techniques);
  color: white;
}
.btn-techniques:hover {
  background-color: var(--color-techniques-hover);
  border-color: var(--color-techniques-hover);
  color: white;
}
.btn-outline-techniques {
  color: var(--color-techniques);
  border-color: var(--color-techniques);
}
.btn-outline-techniques:hover {
  background-color: var(--color-techniques);
  border-color: var(--color-techniques);
  color: white;
}

.btn-positions {
  background-color: var(--color-positions);
  border-color: var(--color-positions);
  color: white;
}
.btn-positions:hover {
  background-color: var(--color-positions-hover);
  border-color: var(--color-positions-hover);
  color: white;
}
.btn-outline-positions {
  color: var(--color-positions);
  border-color: var(--color-positions);
}
.btn-outline-positions:hover {
  background-color: var(--color-positions);
  border-color: var(--color-positions);
  color: white;
}

.badge-videos {
  background-color: var(--color-videos);
  color: white;
}

.badge-techniques {
  background-color: var(--color-techniques);
  color: white;
}

.badge-positions {
  background-color: var(--color-positions);
  color: white;
}

.badge-phases {
  background-color: var(--color-phases);
  color: white;
}

.badge-mechanics {
  background-color: var(--color-mechanics);
  color: white;
}

/* Legacy support: text-purple alias */
.text-purple { color: var(--color-techniques) !important; }

.search-icon-videos { color: var(--color-videos); }
.search-icon-techniques { color: var(--color-techniques); }
.search-icon-positions { color: var(--color-positions); }
.search-icon-phases { color: var(--color-phases); }
.search-icon-mechanics { color: var(--color-mechanics); }

/* Keyboard shortcut styling */
.search-kbd {
  background-color: var(--neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  box-shadow: var(--shadow-xs);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}

/* Non-interactive elements */
.non-interactive { cursor: default; }