/**
 * BoxStory Brand Kit - Central Color System (CUSTOM VERSION)
 *
 * This is the SINGLE SOURCE OF TRUTH for all brand colors and styles.
 * All components reference these variables instead of hardcoding colors.
 *
 * Merged from: brand-kit.css + color-scheme.css
 * Version: 2.0
 * Created: 2025-11-12
 *
 * Brand Palette (4-Color System):
 * - White (#FFFFFF): 70-80% backgrounds
 * - Deep Navy (#142840): 10-15% text/headers
 * - Aqua (#66c7be): 5-10% buttons/interactive
 * - Coral (#ef3f42): 2-5% accent CTAs
 * - Light Gray (#c4c4c4): Secondary backgrounds
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   Define all brand colors as reusable variables
   ============================================================================ */

:root {
  /* PRIMARY BRAND COLORS */
  --color-white: #ffffff;
  --color-navy: #142840;
  --color-aqua: #66c7be;
  --color-coral: #ef3f42;

  /* EXTENDED COLOR PALETTE */
  --color-white: #ffffff;
  --color-light: #e9e7e7;
  --color-black: #000000;
  --color-navy: #142840;
  --color-aqua: #66c7be;
  --color-coral: #ef3f42;

  /* Navy Variations */
  --color-navy-dark: #0a1a2e;
  --color-navy-light: #1e3a5f;
  --color-navy-lighter: #2d4a6e;

  /* Aqua Variations */
  --color-aqua-dark: #4da89f;
  --color-aqua-light: #7dd6ce;
  --color-aqua-lighter: #a8e6e0;
  --color-aqua-lightest: #d4f3f0;

  /* Coral Variations */
  --color-coral-dark: #d12f32;
  --color-coral-light: #f25456;
  --color-coral-lighter: #f78587;
  --color-coral-lightest: #fcd5d6;

  /* TEXT COLORS */
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --text-light: #a0aec0;
  --text-muted: #718096;
  --text-white: var(--color-white);

  /* BACKGROUND COLORS */
  --bg-white: #ffffff;
  --bg-light: #f7fafc;
  --bg-lighter: #edf2f7;
  --bg-primary: var(--color-white);
  --bg-secondary: #f7fafc;
  --bg-dark: var(--color-navy);
  --bg-accent: var(--color-aqua-lightest);

  /* BORDER COLORS */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e0;
  --border-dark: var(--color-navy-light);

  /* NEUTRAL SURFACES & ICONOGRAPHY */
  --surface-placeholder: #e9ecef;
  --icon-muted: #adb5bd;
  --icon-soft: #cccccc;
  --icon-light: #dddddd;
  --icon-star: #ffc107;
  --icon-star-muted: #dddddd;

  /* SEMANTIC COLORS (Special Cases) */
  --semantic-success: #3ab795;
  --semantic-warning: #ff9078;
  --semantic-error: #ef3f42;
  --semantic-info: #66c7be;
  --color-success: #3ab795;
  --color-warning: #ff9078;
  --color-danger: var(--color-coral);
  --color-info: var(--color-aqua);

  /* GRADIENT DEFINITIONS */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-aqua-light) 0%,
    var(--color-aqua) 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-coral) 0%,
    var(--color-coral-dark) 100%
  );
  --gradient-secondary: linear-gradient(
    135deg,
    var(--color-navy) 0%,
    var(--color-navy-light) 100%
  );
  --gradient-aqua-navy: linear-gradient(
    135deg,
    var(--color-aqua-light) 0%,
    var(--color-navy) 100%
  );
  --gradient-hero: linear-gradient(
    135deg,
    var(--color-navy) 0%,
    var(--color-aqua-dark) 100%
  );
  --gradient-white-navy: linear-gradient(
    135deg,
    var(--color-white) 50%,
    var(--color-navy) 100%
  );
  --gradient-navyblue-navy: linear-gradient(
    135deg,
    var(--color-aqua) 0%,
    var(--color-navy) 100%
  );
  --gradient-navy-aqua: linear-gradient(
    135deg,
    var(--color-navy) 0%,
    var(--color-aqua) 100%
  );

  /* SHADOWS */
  --shadow-sm: 0 1px 3px rgba(20, 40, 64, 0.1);
  --shadow-md: 0 4px 6px rgba(20, 40, 64, 0.1);
  --shadow-lg: 0 10px 15px rgba(20, 40, 64, 0.1);
  --shadow-xl: 0 20px 25px rgba(20, 40, 64, 0.15);
}

/* ============================================================================
   BUTTON STYLES - All buttons use brand colors only
   ============================================================================ */

/* Base button styles */
.btn {
  transition: all 0.3s ease;
  font-weight: 500;
}

/* Primary Button (Aqua to Navy gradient) */
.btn-primary,
.btn-cta {
  background: var(--color-aqua) !important;
  color: rgb(90, 90, 90) !important;
  border: none !important;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  padding: .5rem 1rem;
}

.btn-primary:hover,
.btn-cta:hover,
.btn-primary:focus,
.btn-cta:focus {
   
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 199, 190, 0.3) !important;
  text-decoration: none;
   
}

/* Secondary Button (White with navy border) */
.btn-secondary,
.btn-navy {
  background: white !important;
  color: var(--color-navy) !important;
  border: 2px solid var(--color-navy) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-navy:hover,
.btn-secondary:focus,
.btn-navy:focus {
  background: var(--bg-light) !important;
  color: var(--color-navy) !important;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Accent Button */
.btn-accent {
  background: var(--gradient-accent) !important;
  color: var(--color-white) !important;
  border: none !important;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
  background: var(--color-coral-dark) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgba(239, 63, 66, 0.45) !important;
  border: none !important;
}

/* Success Button */
.btn-success {
  background: var(--semantic-success) !important;
  color: white !important;
  border: none !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-success:hover,
.btn-success:focus {
  opacity: 0.9;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Danger/Error Button */
.btn-danger,
.btn-error {
  background: var(--semantic-error) !important;
  color: white !important;
  border: none !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-danger:hover,
.btn-error:hover,
.btn-danger:focus,
.btn-error:focus {
  opacity: 0.9;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Info Button */
.btn-info {
  background: var(--semantic-info) !important;
  color: white !important;
  border: none !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-info:hover,
.btn-info:focus {
  opacity: 0.9;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Link Button */
.btn-link {
  color: var(--color-aqua) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--color-navy) !important;
  text-decoration: underline;
}

/* Outline Buttons */
.btn-outline-primary {
  background: transparent !important;
  color: var(--color-aqua) !important;
  border: 2px solid var(--color-aqua) !important;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--color-aqua) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-aqua) !important;
  box-shadow: 0 4px 12px rgba(102, 199, 190, 0.3) !important;
}

.btn-outline-accent {
  background: transparent !important;
  color: var(--color-coral) !important;
  border: 2px solid var(--color-coral) !important;
  transition: all 0.3s ease;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus,
.btn-outline-accent:active {
  background: var(--color-coral) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-coral) !important;
  box-shadow: 0 4px 12px rgba(239, 63, 66, 0.35) !important;
}

/* Light Button */
.btn-light {
  background: var(--bg-secondary) !important;
  border-color: var(--border-light) !important;
  color: var(--text-primary) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
  background: var(--border-medium) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

/* Dark Button */
.btn-dark {
  background: var(--color-navy) !important;
  border-color: var(--color-coral) !important;
  color: var(--color-white) !important;
  font-weight: 600;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background: var(--color-coral) !important;
  border-color: var(--color-coral) !important;
  color: var(--color-white) !important;
  box-shadow: 0 6px 15px rgba(239, 63, 66, 0.35) !important;
}

/* Warning Button */
.btn-warning {
  background: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: var(--color-white) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: var(--color-coral) !important;
  border-color: var(--color-coral) !important;
  color: var(--color-white) !important;
}

/* ============================================================================
   NAVIGATION BAR
   ============================================================================ */

.navbar {
  background: var(--color-aqua) !important;
  border-bottom: 2px solid var(--color-aqua);
  box-shadow: var(--shadow-sm);
}

/* Brand Navbar - Navy Blue Background */
nav.brand-navbar {
  background: var(--color-navy) !important;
  background-color: var(--color-navy) !important;
  border-bottom: 2px solid var(--color-navy) !important;
  box-shadow: var(--shadow-sm) !important;
}

nav.navbar.brand-navbar {
   
  --bs-navbar-hover-color: var(--color-aqua);
  --bs-navbar-active-color: var(--color-aqua);
  --bs-navbar-brand-color: var(--color-white);
  --bs-navbar-brand-hover-color: var(--color-aqua);
}

.brand-navbar .navbar-toggler {
  border: 2px solid var(--color-white) !important;
  background: transparent !important;
   
  padding: 1rem 1rem;
}

.brand-navbar .navbar-toggler-icon {
  display: none;
}

/* Custom hamburger bars for navbar toggler */
.brand-navbar .navbar-toggler-bar {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--color-white);
  margin: 5px 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  transform-origin: center center;
}

/* Closed state (default) */
.brand-navbar .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon .bar1,
.brand-navbar .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon .bar2,
.brand-navbar .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon .bar3 {
  transform: rotate(0deg) translateY(0px);
  opacity: 1;
}

/* Opened state */
.brand-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon .bar1 {
  transform: rotate(45deg) translateY(10px);
}

.brand-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon .bar2 {
  opacity: 0;
  transform: scaleX(0);
}

.brand-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon .bar3 {
  transform: rotate(-45deg) translateY(-10px);
}

.brand-navbar .btn {
  font-weight: 600;
}

/* Navbar collapse visibility control */
@media (max-width: 991.98px) {
  .brand-navbar .navbar-collapse {
    display: none;
  }

  .brand-navbar .navbar-collapse.show {
    display: block !important;
  }
}

/* Larger navbar brand text */
.brand-navbar .navbar-brand-large {
  text-decoration: none !important;
  font-size: 2rem !important;
  letter-spacing: 1px;
  font-weight: 800 !important;
  color: var(--color-coral) !important;
}

/* Larger navbar brand text in mobile vide make slow */
@media (max-width: 991.98px) {
  .brand-navbar .navbar-brand-large {
    font-size: 1.5rem !important;
  } 
}

.brand-navbar .nav-link {
  text-decoration: none !important;
  color: var(--color-white) !important;
  font-weight: 600;
  font-size: 1.05rem !important;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.brand-navbar .nav-link:hover {
  color: var(--color-aqua) !important;
  border-bottom: 2px solid var(--color-aqua);
  padding-bottom: 4px;
}

.brand-navbar .nav-link.active {
  color: var(--color-aqua) !important;
  border-bottom: 3px solid var(--color-coral) !important;
  padding-bottom: 3px;
  font-weight: 700;
}

.brand-navbar .navbar-brand {
  color: var(--color-coral) !important;
  font-weight: 800;
  font-size: 1.3rem;
}

.brand-navbar .navbar-brand:hover {
  color: var(--color-aqua) !important;
}

.brand-navbar a {
  color: var(--color-white) !important;
}

.navbar-brand {
  color: var(--color-navy) !important;
  font-weight: 800;
  font-size: 1.3rem;
}

.navbar-brand:hover {
  color: var(--color-aqua) !important;
}

.navbar .nav-link {
  color: var(--color-navy);
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.navbar .nav-link:hover {
  color: var(--color-aqua);
  padding-bottom: 4px;
}

.navbar .nav-item-btn:hover {
  color: var(--color-coral); !important;
  border-bottom: 2px solid var(--color-coral);
  padding-bottom: 4px;
}

.navbar .nav-link.active {
  color: var(--color-aqua);
  border-bottom: 3px solid var(--color-coral);
  padding-bottom: 3px;
  font-weight: 700;
}

/* ============================================================================
   CARD & PANEL STYLES
   ============================================================================ */

.card,
.panel {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--color-light);
  transition: all 0.3s ease;
}

.card:hover,
.panel:hover {
  box-shadow: 0 12px 24px rgba(102, 199, 190, 0.15);
  border-color: var(--color-aqua);
  transform: translateY(-4px);
}

/* Card Header */
.card-header {
  background: var(--bg-secondary);
  border-bottom: 3px solid var(--color-aqua);
  color: var(--color-navy);
  font-weight: 700;
  padding: .75rem;
}

/* Card Title */
.card-title,
.card-header .card-title {
  color: var(--text-primary);
  font-weight: 700;
  margin: 0;
}

/* Card Body */
.card-body {
  color: var(--text-secondary);
}

/* Card Footer */
.card-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
}

/* Accent Card */
.card-accent {
  border-left: 4px solid var(--color-coral);
}

.card-accent .card-header {
  background: var(--color-coral-lightest);
  color: var(--color-coral-dark);
}

/* Primary Card */
.card-primary {
  border-left: 4px solid var(--color-aqua);
}

.card-primary .card-header {
  background: var(--color-aqua-lightest);
  color: var(--color-aqua-dark);
}

/* Card Variants */
.card-variant-white {
  background: var(--color-white);
  border: 2px solid var(--border-light);
}

.card-variant-navy {
  background: var(--color-navy);
  color: var(--color-white);
}

.card-variant-aqua {
  background: var(--color-aqua);
  color: var(--color-white);
}

.card-variant-coral {
  background: var(--color-coral);
  color: var(--color-white);
}

/* ============================================================================
   ALERT STYLES
   ============================================================================ */

.alert {
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.alert-success {
  background-color: var(--semantic-success) !important;
  color: white !important;
}

.alert-danger,
.alert-error {
  background-color: var(--semantic-error) !important;
  color: white !important;
}

.alert-warning {
  background-color: var(--semantic-warning) !important;
  color: white !important;
}

.alert-info {
  background-color: var(--semantic-info) !important;
  color: white !important;
}

.alert-primary {
  background-color: var(--color-navy) !important;
  color: white !important;
}

.alert-accent {
  background-color: var(--color-coral-lightest);
  border-color: var(--color-coral-light);
  color: var(--color-coral-dark);
}

/* ============================================================================
   TOAST STYLES
   ============================================================================ */

.toast {
  background: white;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.bg-success {
  background-color: var(--semantic-success) !important;
  color: white !important;
}

.toast.bg-error,
.toast.bg-danger {
  background-color: var(--semantic-error) !important;
  color: white !important;
}

.toast.bg-warning {
  background-color: var(--semantic-warning) !important;
  color: white !important;
}

.toast.bg-info {
  background-color: var(--semantic-info) !important;
  color: white !important;
}

.toast.bg-primary {
  background-color: var(--color-navy) !important;
  color: white !important;
}

/* ============================================================================
   INPUT & FORM STYLES
   ============================================================================ */

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 13px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--text-primary) !important;
  background-color: var(--color-white) !important;
  background-clip: padding-box;
  border: 1px solid var(--border-medium) !important;
  appearance: none;
  border-radius: 0.5rem;
  transition: 0.5s ease;
}

.form-control:focus {
  border-color: var(--color-aqua) !important;
  background-color: var(--color-white) !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 199, 190, 0.25) !important;
  color: var(--text-primary) !important;
  outline: none;
}

.form-control::placeholder {
  color: var(--text-light);
}

/* Textarea */
.form-control.form-control-lg {
  font-size: 1rem;
}

/* Select */
.form-select {
  display: block;
  width: 100%;
  padding: 0.5rem 13px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--text-primary) !important;
  background-color: var(--color-white) !important;
  background-clip: padding-box;
  border: 1px solid var(--border-medium) !important;
  appearance: none;
  border-radius: 0.5rem;
  transition: .5s ease;
}

.form-select:focus {
  border-color: var(--color-aqua) !important;
  background-color: var(--color-white) !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 199, 190, 0.25) !important;
  outline: none;
}

.form-check-input:checked {
  background-color: var(--color-aqua);
  border-color: var(--color-aqua);
}

/* ============================================================================
   BADGE STYLES
   ============================================================================ */

.badge {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  border-radius: 20px;
}

.badge.bg-primary,
.badge-primary {
  background-color: var(--color-navy) !important;
}

.badge.bg-success,
.badge-success {
  background-color: var(--semantic-success) !important;
}

.badge.bg-danger,
.badge-danger {
  background-color: var(--semantic-error) !important;
}

.badge.bg-warning,
.badge-warning {
  background-color: var(--semantic-warning) !important;
}

.badge.bg-info,
.badge-info {
  background-color: var(--semantic-info) !important;
}

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

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

.badge-outline-primary {
  background: transparent;
  color: var(--color-aqua);
  border: 1px solid var(--color-aqua);
}

/* ============================================================================
   LINK & TEXT STYLES
   ============================================================================ */

a,
.link {
  color: var(--color-aqua);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

a:hover,
.link:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

a:focus,
.link:focus {
  outline: 2px solid var(--color-aqua);
  outline-offset: 2px;
}

a.text-accent {
  color: var(--color-coral);
  font-weight: 600;
}

a.text-accent:hover {
  color: var(--color-coral-dark);
}

/* ============================================================================
   HERO SECTIONS
   ============================================================================ */

.hero-section {
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: 80px 0;
}

.hero-section h1 {
  color: var(--color-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-weight: 800;
}

.hero-section .lead {
  color: var(--color-white);
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.section-primary {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.section-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.section-dark {
  background: var(--bg-dark);
  color: var(--color-white);
}

.section-accent {
  background: var(--bg-accent);
  color: var(--text-primary);
}

/* Section Titles */
.section-title {
  color: var(--color-navy);
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
}

.section-title.centered::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.8);
}

.footer h5 {
  color: var(--color-white);
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
}

.footer a:hover {
  color: var(--color-aqua);
}

/* ============================================================================
   PROGRESS BARS
   ============================================================================ */

.progress-bar {
  background: var(--gradient-primary);
}

.progress-bar-accent {
  background: var(--gradient-primary);
}

/* ============================================================================
   ACCESSIBILITY & FOCUS STATES
   ============================================================================ */

/* Focus visible for all interactive elements */
*:focus-visible {
  outline: 2px solid var(--color-aqua);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-aqua);
  outline-offset: 2px;
}

/* Focus States */
*:focus {
  outline: 2px solid var(--color-aqua);
  outline-offset: 2px;
}

button:focus,
a:focus {
  outline: 2px solid var(--color-aqua);
  outline-offset: 2px;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Placeholder Surfaces */
.bs-placeholder {
  background: var(--surface-placeholder);
  border-radius: 8px;
  width: 100%;
}

.bs-placeholder-sm {
  height: 60px;
  width: 60px;
}

.bs-placeholder-md {
  height: 150px;
}

.bs-placeholder-lg {
  height: 200px;
}

.bs-placeholder.square {
  aspect-ratio: 1 / 1;
}

.bs-placeholder.rounded {
  border-radius: 12px;
}

/* Icon Colors */
.icon-muted {
  color: var(--icon-muted) !important;
}

.icon-soft {
  color: var(--icon-soft) !important;
}

.icon-light {
  color: var(--icon-light) !important;
}

.icon-star {
  color: var(--icon-star) !important;
}

.icon-star-muted {
  color: var(--icon-star-muted) !important;
}

.icon-aqua-light {
  color: var(--color-aqua-light) !important;
}

.icon-xs {
  font-size: 0.8rem;
}

/* Icon Sizing */
.icon-sm {
  font-size: 1.2rem;
}

.icon-md {
  font-size: 1.5rem;
}

.icon-lg {
  font-size: 2rem;
}

.icon-xl {
  font-size: 3rem;
}

.icon-primary {
  color: var(--color-aqua);
}

.icon-accent {
  color: var(--color-coral);
}

.icon-navy {
  color: var(--color-navy);
}

.icon-outline-navy {
  border: 2px solid var(--color-navy);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

/* Gradient Panels */
.bg-gradient-aqua-navy {
  background: var(--gradient-aqua-navy);
  color: var(--color-white);
}

.gradient-panel {
  border-radius: 8px;
  padding: 3rem;
}

/* Palette Demonstrations */
.palette-swatch {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 8px;
  border: 2px solid var(--border-light);
}

.palette-swatch--white {
  background: var(--color-white);
}

.palette-swatch--navy {
  background: var(--color-navy);
}

.palette-swatch--aqua {
  background: var(--color-aqua);
}

.palette-swatch--coral {
  background: var(--color-coral);
}

/* Background Colors */
.bg-white {
  background-color: var(--color-white) !important;
}
.bg-navy {
  background-color: var(--color-navy) !important;
}
.bg-aqua {
  background-color: var(--color-aqua) !important;
}
.bg-coral {
  background-color: var(--color-coral) !important;
}
.bg-secondary {
  background-color: var(--bg-secondary) !important;
}
.bg-accent {
  background-color: var(--bg-accent) !important;
}

/* Text Colors */
.text-navy {
  color: var(--color-navy) !important;
}
.text-aqua {
  color: var(--color-aqua) !important;
}
.text-coral {
  color: var(--color-coral) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}
.text-light {
  color: var(--text-light) !important;
}

/* Border Colors */
.border-aqua {
  border-color: var(--color-aqua) !important;
}
.border-coral {
  border-color: var(--color-coral) !important;
}
.border-navy {
  border-color: var(--color-navy) !important;
}

/* ============================================================================
   SPECIAL EFFECTS
   ============================================================================ */

/* Gradient Text */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.text-gradient-accent {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Hover Effects */
.hover-aqua:hover {
  background-color: var(--color-aqua-lightest);
  transition: background-color 0.3s ease;
}

.hover-coral:hover {
  background-color: var(--color-coral-lightest);
  transition: background-color 0.3s ease;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }

  .card {
    border-radius: 8px;
  }

  .alert {
    border-radius: 8px;
    padding: 1rem;
  }

  .hero-section {
    padding: 60px 0;
  }

  .section-title {
    font-size: 1.5rem;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --color-navy: #000000;
    --color-aqua: #008080;
    --color-coral: #cc0000;
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .btn,
  .navbar,
  .footer {
    display: none;
  }

  body {
    background: white;
    color: black;
  }
}

/* ============================================================================
   COLOR REFERENCE - DO NOT EDIT
   ============================================================================ */

/*
BRAND COLOR PALETTE (4-Color System):
  #FFFFFF (White)    - 70-80% backgrounds
  #142840 (Navy)     - 10-15% text/headers
  #66c7be (Aqua)     - 5-10% buttons/interactive
  #ef3f42 (Coral)    - 2-5% accent CTAs
  #c4c4c4 (Light)    - Secondary backgrounds

SEMANTIC COLORS (Special Cases):
  #3ab795 (Success)  - Positive feedback
  #ff9078 (Warning)  - Warning messages
  #ef3f42 (Error)    - Error messages
  #66c7be (Info)     - Informational messages

NEUTRAL COLORS:
  #2d3748 (Primary Text)   - Main text
  #718096 (Secondary Text) - Muted text
  #a0aec0 (Light Text)     - Lightest text
  #e2e8f0 (Light Border)   - Subtle borders
  #cbd5e0 (Medium Border)  - Medium borders
  #f7fafc (Light BG)       - Light backgrounds

IMPORTANT: Do NOT add new colors outside this palette.
All colors are defined as CSS variables at the top of this file.
Reference variables instead of hardcoding hex values.
*/