/* ============================================================
   DESIGN TOKENS — GLOBAL COLOR SYSTEM
   ============================================================ */

:root {
    /* NEUTRAL COLORS */
    --white: #ffffff;
    --black: #000000;
    --gray-50: #f9f9f9;
    --gray-100: #f5f5f5;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --text-primary: #010524;
    --text-secondary: #333333;
    --text-muted: #666666;
    --surface-light: var(--white);
    --surface-gray: #f5f5f5;
    --surface-dark: #010524;
    --page-bg: #F5F5F5; /* --gray-100 */
    /* SHADOW COLORS*/
    --shadow-soft: 0 2px 6px rgba(0,0,0,0.06);
    --shadow-medium: 0 4px 12px rgba(0,0,0,0.10);
    --shadow-strong: 0 6px 18px rgba(0,0,0,0.18);
    /* CAROUSEL COLORS*/
    --overlay-dark: rgba(0,0,0,0.45);
    --carousel-btn: rgba(0,0,0,0.18);
    --carousel-btn-hover: rgba(0,0,0,0.28);
    /* BRAND COLORS */
    --indigo-accent: #370159;
    --indigo-bg: #F2E6F7;
    --indigo-hover: #4A0678;
    --indigo-shadow: rgba(55, 1, 89, 0.25);
    --dodger-accent: #248BF2;
    --dodger-bg: #E3F1FE;
    --dodger-hover: #0F6FCC;
    --dodger-shadow: rgba(36, 139, 242, 0.25);
    --sky-accent: #1CBCFA;
    --sky-bg: #E1F7FE;
    --sky-hover: #0F9ED4;
    --sky-shadow: rgba(28, 188, 250, 0.25);
    --blush-accent: #FFFBFF;
    --blush-bg: #FFFFFF;
    --blush-hover: #F5EEF5;
    --blush-shadow: rgba(255, 251, 255, 0.25);
    --sapphire-accent: #051962;
    --sapphire-bg: #E6EBF8;
    --sapphire-hover: #030F3A;
    --sapphire-shadow: rgba(5, 25, 98, 0.25);
    --bondi-accent: #0283C5;
    --bondi-bg: #DFF1FA;
    --bondi-hover: #026AA0;
    --bondi-shadow: rgba(2, 131, 197, 0.25);
    --orchid-accent: #B52CC0;
    --orchid-bg: #F8E4FB;
    --orchid-hover: #8E23A0;
    --orchid-shadow: rgba(181, 44, 192, 0.25);
    /* COMPLEMENTARY COLORS */
    --lime-accent: #36C02C;
    --lime-bg: #E8F8E6;
    --lime-hover: #2A9A23;
    --lime-shadow: rgba(54, 192, 44, 0.25);
    --orange-accent: #FC8E1F;
    --orange-bg: #FFEBD6;
    --orange-hover: #D97418;
    --orange-shadow: rgba(252, 142, 31, 0.25);
    --aqua-accent: #1FFCFC;
    --aqua-bg: #E5FEFE;
    --aqua-hover: #17D4D4;
    --aqua-shadow: rgba(31, 252, 252, 0.25);
    --yellowgreen-accent: #8EFC1F;
    --yellowgreen-bg: #F4FEE3;
    --yellowgreen-hover: #74D419;
    --yellowgreen-shadow: rgba(142, 252, 31, 0.25);
    --pink-accent: #FC1F8E;
    --pink-bg: #FFE0F0;
    --pink-hover: #D41876;
    --pink-shadow: rgba(252, 31, 142, 0.25);
    --lemon-accent: #FCFC1F;
    --lemon-bg: #FEFEE3;
    --lemon-hover: #D4D419;
    --lemon-shadow: rgba(252, 252, 31, 0.25);
    --red-accent: #E53935;
    --red-bg: #FDECEC;
    --red-hover: #C62828;
    --red-shadow: rgba(229, 57, 53, 0.25);
    /* SPECIAL THEME */
    --amber-accent: #F5A623;
    --amber-bg: #FFF4DD;
    --amber-hover: #D18A1D;
    --amber-shadow: rgba(245, 166, 35, 0.25);
    /* NAVBAR COLOR TOKENS */
    --nav-bg: #010524;
    --nav-border: var(--dodger-accent);
    --nav-link: var(--gray-200);
    --nav-link-hover: var(--white);
    --nav-link-active: var(--dodger-accent);
    --nav-button-text: var(--white);
    --nav-button-hover: var(--dodger-hover);
    --nav-mobile-bg: #1f2937;
    --nav-mobile-border: #374151;
    --nav-icon: var(--gray-200);
    /* FOOTER COLOR TOKENS */
    --footer-bg: #010524;
    --footer-text: #D0D4DB;
    --footer-brand-primary: #F5F5F5;
    --footer-brand-secondary: var(--dodger-accent);
    --footer-heading: var(--dodger-accent);
    --footer-link: #D0D4DB;
    --footer-link-hover: var(--dodger-accent);
    --footer-hr: var(--dodger-accent);
}


/* ============================================================
   GLOBAL CARD COMPONENT
   ============================================================ */

.card {
    background-color: var(--white);
    border-radius: 8px;
    border-left: 3px solid var(--card-accent);
    box-shadow: var(--shadow-medium);
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

    .card.hover-lift:hover {
        transform: translateY(-4px);
        border-color: var(--card-hover, var(--card-accent));
        box-shadow: var(--shadow-soft), 0 0 2px var(--card-accent);
    }

    .card.hover-glow:hover {
        border-color: var(--card-hover, var(--card-accent));
        box-shadow: 0 0 2px var(--card-accent);
    }

    .card.no-hover:hover {
        transform: none !important;
        box-shadow: var(--shadow-medium) !important;
        border-color: var(--card-accent) !important;
    }
    /* ============================================================
   CARD ACCENT POSITION VARIANTS
   ============================================================ */

    /* LEFT ACCENT (DEFAULT) */
    .card.accent-left {
        border-left: 3px solid var(--card-accent);
        border-radius: 6px;
    }

    /* TOP ACCENT */
    .card.accent-top {
        border-left: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

        .card.accent-top::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 3px; /* matches auth-card */
            width: 100%;
            background-color: var(--card-accent);
            border-radius: 0;
        }


    /* ============================================================
   CARD HOVER VARIANTS
   ============================================================ */

    /* Bounce + glow */
    .card.hover-lift:hover {
        transform: translateY(-4px);
        border-color: var(--card-hover, var(--card-accent));
        box-shadow: var(--shadow-soft), 0 0 3px var(--card-accent);
    }

    /* Glow only */
    .card.hover-glow:hover {
        border-color: var(--card-hover, var(--card-accent));
        box-shadow: 0 0 3px var(--card-accent);
    }

    /* Disable all hover effects */
    .card.no-hover:hover {
        transform: none !important;
        box-shadow: var(--shadow-medium) !important;
        border-color: var(--card-accent) !important;
    }


.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: var(--icon-bg);
    color: var(--card-accent);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* ============================================================
   CARD COLOR THEMES (14 + amber)
   ============================================================ */

/* Brand */
.card-indigo {
    --card-accent: var(--indigo-accent);
    --icon-bg: var(--indigo-bg);
    --card-shadow: var(--indigo-shadow);
    --card-hover: var(--indigo-hover);
}

.card-dodger {
    --card-accent: var(--dodger-accent);
    --icon-bg: var(--dodger-bg);
    --card-shadow: var(--dodger-shadow);
    --card-hover: var(--dodger-hover);
}

.card-sky {
    --card-accent: var(--sky-accent);
    --icon-bg: var(--sky-bg);
    --card-shadow: var(--sky-shadow);
    --card-hover: var(--sky-hover);
}

.card-blush {
    --card-accent: var(--blush-accent);
    --icon-bg: var(--blush-bg);
    --card-shadow: var(--blush-shadow);
    --card-hover: var(--blush-hover);
}

.card-sapphire {
    --card-accent: var(--sapphire-accent);
    --icon-bg: var(--sapphire-bg);
    --card-shadow: var(--sapphire-shadow);
    --card-hover: var(--sapphire-hover);
}

.card-bondi {
    --card-accent: var(--bondi-accent);
    --icon-bg: var(--bondi-bg);
    --card-shadow: var(--bondi-shadow);
    --card-hover: var(--bondi-hover);
}

.card-orchid {
    --card-accent: var(--orchid-accent);
    --icon-bg: var(--orchid-bg);
    --card-shadow: var(--orchid-shadow);
    --card-hover: var(--orchid-hover);
}

/* Complementary */
.card-lime {
    --card-accent: var(--lime-accent);
    --icon-bg: var(--lime-bg);
    --card-shadow: var(--lime-shadow);
    --card-hover: var(--lime-hover);
}

.card-orange {
    --card-accent: var(--orange-accent);
    --icon-bg: var(--orange-bg);
    --card-shadow: var(--orange-shadow);
    --card-hover: var(--orange-hover);
}

.card-aqua {
    --card-accent: var(--aqua-accent);
    --icon-bg: var(--aqua-bg);
    --card-shadow: var(--aqua-shadow);
    --card-hover: var(--aqua-hover);
}

.card-yellowgreen {
    --card-accent: var(--yellowgreen-accent);
    --icon-bg: var(--yellowgreen-bg);
    --card-shadow: var(--yellowgreen-shadow);
    --card-hover: var(--yellowgreen-hover);
}

.card-pink {
    --card-accent: var(--pink-accent);
    --icon-bg: var(--pink-bg);
    --card-shadow: var(--pink-shadow);
    --card-hover: var(--pink-hover);
}

.card-lemon {
    --card-accent: var(--lemon-accent);
    --icon-bg: var(--lemon-bg);
    --card-shadow: var(--lemon-shadow);
    --card-hover: var(--lemon-hover);
}

.card-cyan {
    --card-accent: var(--cyan-accent);
    --icon-bg: var(--cyan-bg);
    --card-shadow: var(--cyan-shadow);
    --card-hover: var(--cyan-hover);
}

/* Special */
.card-amber {
    --card-accent: var(--amber-accent);
    --icon-bg: var(--amber-bg);
    --card-shadow: var(--amber-shadow);
    --card-hover: var(--amber-hover);
}

/* ============================================================
   GLOBAL BUTTON SYSTEM
   ============================================================ */

.btn {
    display: inline-block;
    padding: 5px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

/* Primary */
.btn-blue {
    background-color: var(--dodger-accent);
    color: var(--white);
}

    .btn-blue:hover {
        background-color: var(--dodger-hover);
    }

/* Secondary */
.btn-orange {
    background-color: var(--orange-accent);
    color: var(--white);
}

    .btn-orange:hover {
        background-color: var(--orange-hover);
    }

/* Login/Registration */
.btn.btn-sapphire {
    background-color: var(--sapphire-accent) !important;
    color: var(--white) !important;
}

    .btn.btn-sapphire:hover {
        background-color: var(--sapphire-hover) !important;
        color: var(--white) !important;
    }

/* Danger / destructive action */
.btn-red {
    background-color: var(--red-accent);
    color: var(--white);
}

    .btn-red:hover {
        background-color: var(--red-hover);
    }


/* Text link */
.btn-link {
    background: none;
    padding: 0;
    color: var(--dodger-accent);
    font-weight: 700;
}

    .btn-link:hover {
        color: var(--dodger-hover);
        text-decoration: underline;
    }

    .btn-link::after {
        content: " ➝";
        font-size: 1rem;
        position: relative;
        top: 0.05rem;
    }

/* ============================================================
   GLOBAL FORM MESSAGE COMPONENT
   Used on login, register, profile, password, etc.
   ============================================================ */

.form-message {
    font-size: 0.95rem;
    font-weight: 400;
    margin-top: 14px;
    line-height: 1.4;
}

    /* Success */
    .form-message.success {
        color: var(--lime-accent);
    }

    /* Error */
    .form-message.error {
        color: var(--orange-accent);
    }


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

@media (max-width: 768px) {
    .btn:not(.btn-link) {
        width: 100%;
        max-width: 280px;
    }
}