/*
 * Consolidated Utility Classes - Bootstrap-First Approach
 * Contains ALL utility classes from theme files (no duplicates)
 * Extends Bootstrap 5.3.6 with brand-specific utilities only
 *
 * CONSOLIDATED FROM:
 * - custom-utilities.css (brand colors, transitions, shadows)
 * - professional-theme.css (professional utilities, spacing)
 * - professional-blog-theme.css (typography, cards, buttons)
 * - grayscale-theme.css (grayscale utilities)
 *
 * Generated: 2025-09-18
 */

/* Import consolidated design system */
@import url('design-system.css');

/* ==========================================================================
 * BRAND-SPECIFIC COLORS (from custom-utilities.css)
 * ========================================================================== */

.text-brand-primary { color: var(--tll-brand-primary); }
.text-brand-secondary { color: var(--tll-brand-secondary); }
.text-brand-dark { color: var(--tll-brand-dark); }
.text-legal-navy { color: var(--tll-legal-navy); }
.text-legal-gold { color: var(--tll-legal-gold); }
.text-citation { color: var(--tll-citation-color); }

.bg-brand-primary { background-color: var(--tll-brand-primary); }
.bg-brand-secondary { background-color: var(--tll-brand-secondary); }
.bg-brand-dark { background-color: var(--tll-brand-dark); }
.bg-legal-navy { background-color: var(--tll-legal-navy); }
.bg-legal-light { background-color: var(--tll-legal-light-gray); }
.bg-gradient-brand { background: var(--tll-gradient-brand); }

/* ==========================================================================
 * SHADOW UTILITIES (consolidated from multiple files)
 * ========================================================================== */

.shadow-legal { box-shadow: var(--tll-shadow-legal); }
.shadow-premium { box-shadow: var(--tll-shadow-premium); }
.shadow-professional-sm { box-shadow: var(--tll-shadow-sm); }
.shadow-professional-md { box-shadow: var(--tll-shadow-md); }
.shadow-professional-lg { box-shadow: var(--tll-shadow-lg); }

/* ==========================================================================
 * TYPOGRAPHY UTILITIES (consolidated from multiple files)
 * ========================================================================== */

.line-height-tight { line-height: var(--tll-line-height-tight); }
.line-height-loose { line-height: var(--tll-line-height-loose); }
.fs-xs { font-size: var(--tll-font-size-xs); }
.fs-xxl { font-size: var(--tll-font-size-xxl); }

/* Professional typography */
.text-professional { color: var(--tll-primary); }
.text-professional-muted { color: var(--tll-muted); }
.text-professional-light { color: var(--tll-light); }

/* Legal document typography */
.legal-text {
   color: var(--tll-legal-text-color);
   line-height: var(--tll-line-height-loose);
}

.legal-heading {
   color: var(--tll-legal-heading-color);
   font-weight: 600;
   line-height: var(--tll-line-height-tight);
}

.citation-text {
   color: var(--tll-citation-color);
   font-style: italic;
   font-size: 0.875rem;
}

/* Blog typography (from professional-blog-theme.css) */
.tll-heading {
   font-family: var(--tll-font-serif);
   font-weight: 700;
   line-height: 1.2;
   color: var(--tll-primary-navy);
   margin-bottom: 1.5rem;
}

.tll-heading-1 {
   font-size: 2.5rem;
   margin-bottom: 2rem;
}

.tll-heading-2 {
   font-size: 2rem;
   margin-bottom: 1.5rem;
}

.tll-heading-3 {
   font-size: 1.75rem;
   margin-bottom: 1.25rem;
}

.tll-text-serif {
   font-family: var(--tll-font-serif);
}

.tll-text-body {
   font-family: var(--tll-font-sans);
   font-size: 1.1rem;
   line-height: 1.7;
   color: var(--tll-gray-700);
}

.tll-text-legal {
   font-family: var(--tll-font-serif);
   font-size: 1.1rem;
   line-height: 1.8;
   color: var(--tll-gray-800);
}

/* Grayscale typography */
.tll-text-black { color: var(--tll-black); }
.tll-text-white { color: var(--tll-white); }
.tll-text-gray-600 { color: var(--tll-gray-600); }
.tll-text-gray-700 { color: var(--tll-gray-700); }
.tll-text-gray-800 { color: var(--tll-gray-800); }
.tll-text-gray-900 { color: var(--tll-gray-900); }

/* ==========================================================================
 * TRANSITION UTILITIES (from custom-utilities.css)
 * ========================================================================== */

.transition-fast { transition: all var(--tll-transition-fast); }
.transition-normal { transition: all var(--tll-transition-normal); }
.transition-slow { transition: all var(--tll-transition-slow); }

/* ==========================================================================
 * LAYOUT UTILITIES (consolidated from multiple files)
 * ========================================================================== */

.sidebar-width { width: var(--tll-sidebar-width); }
.header-height { height: var(--tll-header-height); }
.content-max-width { max-width: var(--tll-content-max-width); }

/* ==========================================================================
 * SPACING UTILITIES (consolidated from multiple files)
 * ========================================================================== */

/* Professional spacing (from professional-theme.css) */
.p-professional { padding: var(--tll-space-lg); }
.m-professional { margin: var(--tll-space-lg); }
.p-professional-sm { padding: var(--tll-space-sm); }
.m-professional-sm { margin: var(--tll-space-sm); }
.p-professional-lg { padding: var(--tll-space-xl); }
.m-professional-lg { margin: var(--tll-space-xl); }

/* ==========================================================================
 * CARD UTILITIES (consolidated from multiple files)
 * ========================================================================== */

/* Base card styles (from multiple theme files) */
.tll-card {
   background: white;
   border: 1px solid var(--tll-gray-200);
   border-radius: var(--tll-border-radius-md);
   box-shadow: var(--tll-shadow);
   overflow: hidden;
   transition: var(--tll-transition-normal);
}

.tll-card:hover {
   transform: translateY(-2px);
   box-shadow: var(--tll-shadow-md);
}

.tll-card-elevated {
   box-shadow: var(--tll-shadow-md);
}

.tll-card-elevated:hover {
   box-shadow: var(--tll-shadow-lg);
   transform: translateY(-4px);
}

.tll-card-header {
   background-color: var(--tll-gray-800);
   color: var(--tll-white);
   padding: var(--tll-space-lg);
   border-bottom: 1px solid var(--tll-gray-200);
}

.tll-card-body {
   padding: var(--tll-space-lg);
}

.tll-card-footer {
   background-color: var(--tll-gray-50);
   border-top: 1px solid var(--tll-gray-200);
   padding: var(--tll-space-md) var(--tll-space-lg);
}

/* ==========================================================================
 * BUTTON UTILITIES (consolidated from multiple files)
 * ========================================================================== */

/* Base button styles (from professional-blog-theme.css) */
.tll-btn {
   border: none;
   border-radius: var(--tll-border-radius-md);
   font-weight: 500;
   transition: var(--tll-transition-normal);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.tll-btn-primary {
   background: var(--tll-gradient-brand);
   color: white;
}

.tll-btn-primary:hover {
   background: var(--tll-brand-dark);
   color: white;
   transform: translateY(-2px);
   box-shadow: var(--tll-shadow-legal);
}

.tll-btn-secondary {
   background: var(--tll-gray-200);
   color: var(--tll-gray-800);
}

.tll-btn-secondary:hover {
   background: var(--tll-gray-300);
   transform: translateY(-1px);
}

.tll-btn-accent {
   background: var(--tll-accent-blue);
   color: white;
}

.tll-btn-accent:hover {
   background: var(--tll-primary-slate);
   transform: translateY(-2px);
}

.tll-btn-lg {
   padding: 0.75rem 1.5rem;
   font-size: 1.1rem;
}

/* ==========================================================================
 * BACKGROUND UTILITIES (consolidated from multiple files)
 * ========================================================================== */

/* Professional backgrounds (from professional-theme.css) */
.bg-professional { background-color: var(--tll-primary); }
.bg-professional-light { background-color: var(--tll-light); }
.bg-professional-lighter { background-color: var(--tll-lighter); }

/* Grayscale backgrounds (from grayscale-theme.css) */
.tll-bg-black { background-color: var(--tll-black); }
.tll-bg-white { background-color: var(--tll-white); }
.tll-bg-gray-50 { background-color: var(--tll-gray-50); }
.tll-bg-gray-100 { background-color: var(--tll-gray-100); }
.tll-bg-gray-800 { background-color: var(--tll-gray-800); }
.tll-bg-gray-900 { background-color: var(--tll-gray-900); }

/* ==========================================================================
 * HOVER EFFECTS (consolidated from multiple files)
 * ========================================================================== */

.hover-lift {
   transition: var(--tll-transition-normal);
}

.hover-lift:hover {
   transform: translateY(-5px);
   box-shadow: var(--tll-shadow-legal);
}

.hover-lift .card-img-top {
   transition: transform var(--tll-transition-normal);
}

.hover-lift:hover .card-img-top {
   transform: scale(1.05);
}

/* ==========================================================================
 * FORM ENHANCEMENT UTILITIES (from custom-utilities.css)
 * ========================================================================== */

.focused-field {
   box-shadow: 0 0 0 0.2rem rgb(13 110 253 / 0.25) !important;
   border-color: #86b7fe !important;
   outline: none !important;
   transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

@media (prefers-color-scheme: dark) {
   .focused-field {
      box-shadow: 0 0 0 0.2rem rgb(13 110 253 / 0.4) !important;
      border-color: #6ea8fe !important;
   }
}

.focus-trap-active {
   position: relative;
}

.focus-trap-active::before {
   content: '';
   position: absolute;
   inset: -2px;
   border: 2px solid #007bff;
   border-radius: 0.375rem;
   pointer-events: none;
   z-index: 10;
   animation: focus-trap-pulse 2s infinite;
}

@keyframes focus-trap-pulse {
   0%, 100% { opacity: 0.5; }
   50% { opacity: 1; }
}

.skip-link {
   position: absolute;
   top: -40px;
   left: 6px;
   background: #000;
   color: #fff;
   padding: 8px;
   text-decoration: none;
   border-radius: 4px;
   z-index: 1000;
   transition: top 0.3s;
}

.skip-link:focus {
   top: 6px;
}

.was-validated .form-control:focus:invalid,
.form-control:focus.is-invalid {
   border-color: #dc3545;
   box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 0.25);
}

.was-validated .form-control:focus:valid,
.form-control:focus.is-valid {
   border-color: #198754;
   box-shadow: 0 0 0 0.2rem rgb(25 135 84 / 0.25);
}

/* ==========================================================================
 * ANIMATION UTILITIES (consolidated from multiple files)
 * ========================================================================== */

.fade-in-up {
   animation: fade-in-up var(--tll-transition-slow) ease-out;
}

.tll-fade-in {
   opacity: 0;
   animation: fade-in 0.6s ease-in-out forwards;
}

.tll-slide-up {
   opacity: 0;
   transform: translateY(20px);
   animation: slide-up 0.6s ease-in-out forwards;
}

@keyframes fade-in {
   to { opacity: 1; }
}

@keyframes slide-up {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fade-in-up {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes tll-fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}

@keyframes tll-slide-up {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}