/* DontLoseIt v10 Theme - Light Theme with Coral Accent */

:root {
    /* Coral brand colors */
    --coral-50: #fff5f3;
    --coral-100: #ffe4de;
    --coral-200: #fecaca;
    --coral-400: #f87171;
    --coral-500: #EC5E43;
    --coral-600: #d94e35;
    --coral-700: #c53d26;
    
    /* Gray scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Primary = Coral */
    --dp-primary: #EC5E43;
    --dp-primary-hover: #d94e35;
    --dp-primary-active: #c53d26;
    --dp-primary-contrast: #ffffff;
    --dp-ring: rgba(236, 94, 67, 0.35);
}

/* ============================================
   CORAL COLOR UTILITIES
   ============================================ */

/* Text colors */
.text-coral-500 { color: #EC5E43; }
.text-coral-600 { color: #d94e35; }
.text-coral-700 { color: #c53d26; }

/* Background colors */
.bg-coral-50 { background-color: #fff5f3; }
.bg-coral-100 { background-color: #ffe4de; }
.bg-coral-500 { background-color: #EC5E43; }
.bg-coral-600 { background-color: #d94e35; }

/* Background with opacity */
.bg-coral-500\/10 { background-color: rgba(236, 94, 67, 0.1); }
.bg-coral-500\/15 { background-color: rgba(236, 94, 67, 0.15); }
.bg-coral-500\/20 { background-color: rgba(236, 94, 67, 0.2); }

/* Border colors */
.border-coral-200 { border-color: #fecaca; }
.border-coral-500 { border-color: #EC5E43; }

/* Ring/Focus colors */
.ring-coral-500 { --tw-ring-color: #EC5E43; }
.focus\:ring-coral-500:focus { --tw-ring-color: #EC5E43; }

/* Hover states */
.hover\:text-coral-500:hover { color: #EC5E43; }
.hover\:bg-coral-500:hover { background-color: #EC5E43; }
.hover\:bg-coral-600:hover { background-color: #d94e35; }
.hover\:border-coral-500:hover { border-color: #EC5E43; }

/* ============================================
   GRADIENT TEXT (for headlines)
   ============================================ */

.text-gradient-coral {
    background: linear-gradient(135deg, #EC5E43 0%, #f87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   BUTTON STYLES
   ============================================ */

.btn-coral {
    background: linear-gradient(135deg, #EC5E43 0%, #d94e35 100%);
    color: white;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(236, 94, 67, 0.25);
}

.btn-coral:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(236, 94, 67, 0.35);
}

.btn-coral:active {
    transform: translateY(0);
}

.btn-ghost-coral {
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.btn-ghost-coral:hover {
    border-color: rgba(236, 94, 67, 0.4);
    color: #EC5E43;
    transform: translateY(-2px);
}

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

.badge-coral {
    background: rgba(236, 94, 67, 0.1);
    color: #c53d26;
}

/* ============================================
   ICON BOX STYLES
   ============================================ */

.icon-box-coral {
    background: rgba(236, 94, 67, 0.1);
    color: #EC5E43;
}

.icon-box-coral svg {
    color: #EC5E43;
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */

.card-hover-coral:hover {
    background-color: rgba(236, 94, 67, 0.05);
    border-color: rgba(236, 94, 67, 0.3);
}

/* ============================================
   CTA SECTION GRADIENT
   ============================================ */

.bg-gradient-coral {
    background: linear-gradient(135deg, #EC5E43 0%, #d94e35 50%, #c53d26 100%);
}

/* ============================================
   STAT NUMBER COLORS
   ============================================ */

.stat-coral {
    color: #EC5E43;
}

/* ============================================
   DECORATIVE ELEMENTS
   ============================================ */

.decorative-coral {
    background: rgba(236, 94, 67, 0.1);
}

.decorative-coral-light {
    background: rgba(236, 94, 67, 0.08);
}

/* ============================================
   MAP PIN STYLING
   ============================================ */

.map-pin-coral {
    color: #EC5E43;
}

.map-ping-coral {
    background: rgba(236, 94, 67, 0.2);
}

/* ============================================
   FOCUS RING UTILITIES
   ============================================ */

.focus-ring-coral:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(236, 94, 67, 0.15);
    border-color: #EC5E43;
}

/* ============================================
   INPUT STYLES
   ============================================ */

input.input-coral:focus,
textarea.input-coral:focus,
select.input-coral:focus {
    outline: none;
    border-color: #EC5E43;
    box-shadow: 0 0 0 3px rgba(236, 94, 67, 0.15);
}

/* ============================================
   LINK HOVER STYLES
   ============================================ */

a.link-coral:hover {
    color: #EC5E43;
}

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

@keyframes ping-coral {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping-coral {
    animation: ping-coral 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}