/* ===========================================
   TrafficTantra Design System v2.0
   Brand overrides for Tailwind utility classes
   Source of truth: Official TrafficTantra logo
   =========================================== */

/* --- Brand Colors --- */
:root {
  --brand-magenta: #ED0181;
  --brand-magenta-dark: #C0016A;
  --brand-magenta-light: #FFE0F0;
  --brand-purple: #9C23C8;
  --brand-blue: #01AFE1;
  --brand-cyan: #00D8E0;
  --brand-dark: #111111;
  --brand-darker: #0A0A0A;
  --brand-bg: #FFFFFF;
  --brand-bg-alt: #F5F5F5;
  --brand-bg-warm: #FAFAFA;
  --brand-text: #404040;
  --brand-text-muted: #737373;
  --brand-text-light: #A3A3A3;
  --brand-line: #E5E5E5;
  --brand-line-light: #F0F0F0;
  --brand-success: #10B981;
  --brand-warning: #F59E0B;
  --brand-error: #EF4444;
}

/* --- Gradient (from logo) --- */
.brand-gradient {
  background: linear-gradient(135deg, #ED0181, #9C23C8, #01AFE1, #00D8E0);
}
.brand-gradient-text {
  background: linear-gradient(135deg, #ED0181, #9C23C8, #01AFE1, #00D8E0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-gradient-border {
  border-image: linear-gradient(135deg, #ED0181, #9C23C8, #01AFE1, #00D8E0) 1;
}

/* --- Background Utilities --- */
.bg-magenta { background-color: #ED0181; }
.bg-magenta\/10 { background-color: rgba(237, 1, 129, 0.1); }
.bg-magenta\/5 { background-color: rgba(237, 1, 129, 0.05); }
.bg-magenta-dark { background-color: #C0016A; }
.bg-purple { background-color: #9C23C8; }
.bg-blue { background-color: #01AFE1; }
.bg-cyan { background-color: #00D8E0; }
.bg-bg { background-color: #FFFFFF; }
.bg-bg-alt { background-color: #F5F5F5; }
.bg-brand-dark { background-color: #111111; }
.bg-brand-darker { background-color: #0A0A0A; }

/* --- Text Utilities --- */
.text-magenta { color: #ED0181; }
.text-magenta-dark { color: #C0016A; }
.text-purple { color: #9C23C8; }
.text-blue { color: #01AFE1; }
.text-cyan { color: #00D8E0; }
.text-brand-green { color: #ED0181; } /* backward compat - now points to magenta */
.text-brand-green-600 { color: #C0016A; }
.text-ink { color: #111111; }
.text-ink-muted { color: #737373; }
.text-ink-muted\/80 { color: rgba(115, 115, 115, 0.8); }
.text-ink-muted\/60 { color: rgba(115, 115, 115, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/40 { color: rgba(255, 255, 255, 0.4); }

/* --- Border Utilities --- */
.border-magenta { border-color: #ED0181; }
.border-purple { border-color: #9C23C8; }
.border-blue { border-color: #01AFE1; }
.border-cyan { border-color: #00D8E0; }
.border-brand-green { border-color: #ED0181; } /* backward compat */
.border-line { border-color: #E5E5E5; }
.border-line\/70 { border-color: rgba(229, 229, 229, 0.7); }
.border-line\/60 { border-color: rgba(229, 229, 229, 0.6); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/25 { border-color: rgba(255, 255, 255, 0.25); }

/* --- Ring Utilities --- */
.focus-visible\:ring-brand-green\/60 { /* updated to use magenta */ }

/* --- Hover States --- */
.hover\:border-brand-green:hover { border-color: #ED0181; }
.hover\:bg-brand-green-600:hover { background-color: #C0016A; }
.hover\:text-white:hover { color: #FFFFFF; }

/* --- Shadows --- */
.shadow-tt-sm {
  --tw-shadow: 0 1px 2px 0 rgba(17, 17, 17, 0.04);
  box-shadow: var(--tw-inset-shadow), var(--tw-ring-offset-shadow), var(--tw-shadow);
}
.shadow-tt-md {
  --tw-shadow: 0 4px 24px -8px rgba(17, 17, 17, 0.08);
  box-shadow: var(--tw-inset-shadow), var(--tw-ring-offset-shadow), var(--tw-shadow);
}
.shadow-tt-lg {
  --tw-shadow: 0 20px 50px -24px rgba(17, 17, 17, 0.08);
  box-shadow: var(--tw-inset-shadow), var(--tw-ring-offset-shadow), var(--tw-shadow);
}

/* --- Button System --- */
.tt-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  background-color: #111111;
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: all 0.15s ease;
  border: none;
  cursor: pointer;
}
.tt-btn-primary:hover {
  background-color: #2B2B2B;
  color: #FFFFFF;
}
.tt-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  background-color: transparent;
  color: #111111;
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid #E5E5E5;
  transition: all 0.15s ease;
  cursor: pointer;
}
.tt-btn-secondary:hover {
  background-color: #F5F5F5;
}
.tt-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  background-color: #ED0181;
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.15s ease;
  border: none;
  cursor: pointer;
}
.tt-btn-accent:hover {
  background-color: #C0016A;
  color: #FFFFFF;
}

/* --- Card System --- */
.tt-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.2s ease;
}
.tt-card:hover {
  border-color: #ED0181;
  box-shadow: 0 4px 24px -8px rgba(17, 17, 17, 0.08);
}
.tt-card-dark {
  background-color: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px;
}

/* --- Form System --- */
tt-form input:focus,
tt-form select:focus,
tt-form textarea:focus {
  outline: none;
  border-color: #ED0181;
  box-shadow: 0 0 0 2px rgba(237, 1, 129, 0.15);
}
.tt-form .tt-submit-btn {
  background-color: #ED0181 !important;
  color: #FFFFFF !important;
}
.tt-form .tt-submit-btn:hover {
  background-color: #C0016A !important;
}

/* --- Form Placeholder Fix for Magenta --- */
.tt-form input:focus,
.tt-form select:focus,
.tt-form textarea:focus {
  border-color: #ED0181 !important;
  box-shadow: 0 0 0 2px rgba(237, 1, 129, 0.15) !important;
}

/* --- Badge System --- */
.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.76px;
  color: #737373;
}
.tt-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ED0181;
}
.tt-badge-light {
  color: #ED0181;
}
.tt-badge-light::before {
  background-color: #ED0181;
}

/* --- Section spacing --- */
.tt-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 1024px) {
  .tt-section { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 767px) {
  .tt-section { padding-top: 40px; padding-bottom: 40px; }
}

/* --- Container max-width --- */
.tt-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 767px) {
  .tt-container { padding: 0 16px; }
}