/* ==========================================
   Global Color Scales
   Deep Teal (#256262) and Coral (#FE7744)
   Tints/Shades from 50-950 (50-step increments)
   ========================================== */
:root {
    /* Deep Teal Scale (#256262 base = 500) */
    --deep-teal-50: #e8f4f4;
    --deep-teal-100: #d1e8e8;
    --deep-teal-150: #b9dcdc;
    --deep-teal-200: #a2d0d0;
    --deep-teal-250: #8ac4c4;
    --deep-teal-300: #73b8b8;
    --deep-teal-350: #5bacac;
    --deep-teal-400: #44a0a0;
    --deep-teal-450: #358888;
    /* Base color */
    --deep-teal-500: #256262;
    --deep-teal-550: #215858;
    --deep-teal-600: #1d4e4e;
    --deep-teal-650: #194444;
    --deep-teal-700: #153a3a;
    --deep-teal-750: #113030;
    --deep-teal-800: #0d2626;
    --deep-teal-850: #091c1c;
    --deep-teal-900: #051212;
    --deep-teal-950: #020808;

    /* Coral Scale (#F28C5F base = 500) */
    --coral-50: #fef4ef;
    --coral-100: #fce8df;
    --coral-150: #fbddcf;
    --coral-200: #fad1bf;
    --coral-250: #f9c6af;
    --coral-300: #f7ba9f;
    --coral-350: #f6af8f;
    --coral-400: #f5a37f;
    --coral-450: #f3986f;
    --coral-500: #F28C5F;
    /* Base color */
    --coral-550: #da7e56;
    --coral-600: #c2704c;
    --coral-650: #a96243;
    --coral-700: #915439;
    --coral-750: #794630;
    --coral-800: #613826;
    --coral-850: #492a1d;
    --coral-900: #301c13;
    --coral-950: #180e09;

    --neon-orange-500: #FE7744;
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Layout 3 Highlight Styles
   Two alternating soft background pills
   ========================================== */

/* Style 1: Soft Teal Background Pill */
.hl-teal-pill {
    background: linear-gradient(135deg, rgba(37, 99, 99, 0.1), rgba(37, 99, 99, 0.15));
    padding: 2px 8px;
    border-radius: 4px;
}

/* Style 2: Soft Orange Background Pill */
.hl-orange-pill {
    background: linear-gradient(135deg, rgba(254, 120, 69, 0.1), rgba(254, 120, 69, 0.15));
    padding: 2px 8px;
    border-radius: 4px;
}

/* Adjustments for active (white text) state in Layout 3 */
.l3-item.is-active .hl-teal-pill {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.18));
}

.l3-item.is-active .hl-orange-pill {
    background: linear-gradient(135deg, rgba(254, 120, 69, 0.25), rgba(254, 120, 69, 0.35));
}