/* ========================
   GLOBAL COLOR VARIABLES
======================== */
:root {
    --primary-orange: #FF6B35;
    --orange-hover: #E65C2E;
    --primary-purple: #6A0DAD;
    --highlight-yellow: #FFC107;
    --neutral-dark: #222222;
    --neutral-light: #F9F9F9;
    --soft-orange: #FFF3E6;
}

/* ========================
   TEXT COLORS
======================== */
.text-primary { color: var(--primary-orange); }
.text-purple { color: var(--primary-purple); }
.text-dark { color: var(--neutral-dark); }
.text-light { color: var(--neutral-light); }
.text-highlight { color: var(--highlight-yellow); }

/* ========================
    BACKGROUND COLORS
======================== */
.bg-primary { background-color: var(--primary-orange); }
.bg-purple { background-color: var(--primary-purple); }
.bg-dark { background-color: var(--neutral-dark); }
.bg-light { background-color: var(--neutral-light); }
.bg-soft { background-color: var(--soft-orange); }

/* ========================
   BORDER COLORS
======================== */
.border-primary { border-color: var(--primary-orange); }
.border-purple { border-color: var(--primary-purple); }
.border-dark { border-color: var(--neutral-dark); }
.border-light { border-color: var(--neutral-light); }

/* ========================
    GRADIENT BACKGROUNDS
======================== */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-orange), var(--primary-purple));
}

.gradient-soft {
    background: linear-gradient(135deg, var(--soft-orange), var(--neutral-light));
}

/* ========================
   HOVER EFFECTS
======================== */
.hover-primary:hover { background-color: var(--orange-hover); }
.hover-lift:hover { 
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

/* ========================
   SHADOW EFFECTS
======================== */
.shadow-primary {
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
}

.shadow-hover:hover {
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

/* ========================
   FORM ELEMENTS
======================== */
input, textarea, select {
    border: 2px solid var(--neutral-light);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* ========================
   BUTTON STYLES
======================== */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-orange);
    color: var(--neutral-light);
    border: none;
}

.btn-primary:hover {
    background-color: var(--orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange);
}

.btn-outline:hover {
    background-color: var(--primary-orange);
    color: var(--neutral-light);
}

/* ========================
   CARD & SECTION STYLES
======================== */
.card {
    background: var(--neutral-light);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.15);
}

.section {
    padding: 80px 0;
}

.section-soft {
    background-color: var(--soft-orange);
}

/* ========================
   ACCENT ELEMENTS
======================== */
.accent-line {
    width: 60px;
    height: 4px;
    background: var(--primary-orange);
    margin: 16px 0;
}

.accent-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-orange);
    display: inline-block;
    margin: 0 4px;
}