/* /modules/personal/css/personal_colors.css */
/* Personal Module Modern Design Tokens & Color System */

:root {
    /* ============================================================
       1. Core Color Tokens (Curated 26 Design Tokens)
       ============================================================ */
    --personal-cyan: #00F0FF;
    --personal-cyan-rgb: 0, 240, 255;

    --personal-mint: #00C49A;
    --personal-mint-rgb: 0, 196, 154;

    --personal-fuchsia: #FF003C;
    --personal-fuchsia-rgb: 255, 0, 60;

    --personal-purple: #6C63FF;
    --personal-purple-rgb: 108, 99, 255;

    --personal-gold: #D4AF37;
    --personal-gold-rgb: 212, 175, 55;

    --personal-terracotta: #C84C35;
    --personal-terracotta-rgb: 200, 76, 53;

    --personal-sage: #7BA08E;
    --personal-sage-rgb: 123, 160, 142;

    --personal-yellow: #FFD166;
    --personal-yellow-rgb: 255, 209, 102;

    --personal-acid: #D6FF00;
    --personal-acid-rgb: 214, 255, 0;

    --personal-cobalt: #1900FF;
    --personal-cobalt-rgb: 25, 0, 255;

    --personal-pink: #FF6B6B;
    --personal-pink-rgb: 255, 107, 107;

    --personal-forest: #1A2E25;
    --personal-forest-rgb: 26, 46, 37;

    --personal-emerald: #0B1D1A;
    --personal-emerald-rgb: 11, 29, 26;

    --personal-navy: #0F172A;
    --personal-navy-rgb: 15, 23, 42;

    --personal-ash: #8A8A93;
    --personal-ash-rgb: 138, 138, 147;

    --personal-slate: #2D3142;
    --personal-slate-rgb: 45, 49, 66;

    --personal-sandstone: #E6E4DF;
    --personal-sandstone-rgb: 230, 228, 223;

    --personal-lilac: #E8DFF5;
    --personal-lilac-rgb: 232, 223, 245;

    --personal-tangerine: #FF7A00;
    --personal-tangerine-rgb: 255, 122, 0;

    --personal-crimson: #B91C1C;
    --personal-crimson-rgb: 185, 28, 28;

    --personal-chartreuse: #A3E635;
    --personal-chartreuse-rgb: 163, 230, 53;

    --personal-orchid: #C026D3;
    --personal-orchid-rgb: 192, 38, 211;

    --personal-mocha: #8A5A44;
    --personal-mocha-rgb: 138, 90, 68;

    --personal-peach: #FFBE98;
    --personal-peach-rgb: 255, 190, 152;

    --personal-cerulean: #0284C7;
    --personal-cerulean-rgb: 2, 132, 199;

    --personal-butter: #F5E1A4;
    --personal-butter-rgb: 245, 225, 164;
}

/* ============================================================
   2. Modern Pill Badges & Tags (.personal-badge, .personal-badge-*)
   ============================================================ */
.personal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    border: 1px solid transparent;
}

.personal-badge:hover {
    transform: translateY(-1px);
}

/* Badge Variants with Light & Dark contrast tuning */
.personal-badge-cyan {
    background-color: rgba(var(--personal-cyan-rgb), 0.12);
    color: #009eb0;
    border-color: rgba(var(--personal-cyan-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-cyan {
    color: var(--personal-cyan);
    background-color: rgba(var(--personal-cyan-rgb), 0.16);
}

.personal-badge-mint {
    background-color: rgba(var(--personal-mint-rgb), 0.12);
    color: #009676;
    border-color: rgba(var(--personal-mint-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-mint {
    color: var(--personal-mint);
    background-color: rgba(var(--personal-mint-rgb), 0.16);
}

.personal-badge-fuchsia {
    background-color: rgba(var(--personal-fuchsia-rgb), 0.12);
    color: #d10031;
    border-color: rgba(var(--personal-fuchsia-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-fuchsia {
    color: #ff3366;
    background-color: rgba(var(--personal-fuchsia-rgb), 0.18);
}

.personal-badge-purple {
    background-color: rgba(var(--personal-purple-rgb), 0.12);
    color: var(--personal-purple);
    border-color: rgba(var(--personal-purple-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-purple {
    color: #9b95ff;
}

.personal-badge-gold {
    background-color: rgba(var(--personal-gold-rgb), 0.14);
    color: #9c7f1a;
    border-color: rgba(var(--personal-gold-rgb), 0.3);
}
[data-bs-theme="dark"] .personal-badge-gold {
    color: var(--personal-gold);
}

.personal-badge-terracotta {
    background-color: rgba(var(--personal-terracotta-rgb), 0.12);
    color: var(--personal-terracotta);
    border-color: rgba(var(--personal-terracotta-rgb), 0.25);
}

.personal-badge-sage {
    background-color: rgba(var(--personal-sage-rgb), 0.15);
    color: #4f7362;
    border-color: rgba(var(--personal-sage-rgb), 0.3);
}
[data-bs-theme="dark"] .personal-badge-sage {
    color: var(--personal-sage);
}

.personal-badge-yellow {
    background-color: rgba(var(--personal-yellow-rgb), 0.18);
    color: #a07500;
    border-color: rgba(var(--personal-yellow-rgb), 0.35);
}
[data-bs-theme="dark"] .personal-badge-yellow {
    color: var(--personal-yellow);
}

.personal-badge-acid {
    background-color: rgba(var(--personal-acid-rgb), 0.18);
    color: #5c6b00;
    border-color: rgba(var(--personal-acid-rgb), 0.35);
}
[data-bs-theme="dark"] .personal-badge-acid {
    color: var(--personal-acid);
}

.personal-badge-cobalt {
    background-color: rgba(var(--personal-cobalt-rgb), 0.12);
    color: var(--personal-cobalt);
    border-color: rgba(var(--personal-cobalt-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-cobalt {
    color: #8b7dff;
}

.personal-badge-pink {
    background-color: rgba(var(--personal-pink-rgb), 0.12);
    color: #e64545;
    border-color: rgba(var(--personal-pink-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-pink {
    color: var(--personal-pink);
}

.personal-badge-forest {
    background-color: rgba(var(--personal-forest-rgb), 0.15);
    color: var(--personal-forest);
    border-color: rgba(var(--personal-forest-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-forest {
    color: #6ee7b7;
    background-color: rgba(var(--personal-forest-rgb), 0.4);
}

.personal-badge-emerald {
    background-color: rgba(var(--personal-emerald-rgb), 0.15);
    color: var(--personal-emerald);
    border-color: rgba(var(--personal-emerald-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-emerald {
    color: #34d399;
    background-color: rgba(var(--personal-emerald-rgb), 0.4);
}

.personal-badge-navy {
    background-color: rgba(var(--personal-navy-rgb), 0.12);
    color: var(--personal-navy);
    border-color: rgba(var(--personal-navy-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-navy {
    color: #93c5fd;
    background-color: rgba(var(--personal-navy-rgb), 0.4);
}

.personal-badge-ash {
    background-color: rgba(var(--personal-ash-rgb), 0.15);
    color: var(--personal-ash);
    border-color: rgba(var(--personal-ash-rgb), 0.25);
}

.personal-badge-slate {
    background-color: rgba(var(--personal-slate-rgb), 0.14);
    color: var(--personal-slate);
    border-color: rgba(var(--personal-slate-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-slate {
    color: #cbd5e1;
}

.personal-badge-sandstone {
    background-color: rgba(var(--personal-sandstone-rgb), 0.5);
    color: #57534e;
    border-color: rgba(0, 0, 0, 0.12);
}
[data-bs-theme="dark"] .personal-badge-sandstone {
    color: var(--personal-sandstone);
    background-color: rgba(var(--personal-sandstone-rgb), 0.12);
}

.personal-badge-lilac {
    background-color: rgba(var(--personal-lilac-rgb), 0.6);
    color: #581c87;
    border-color: rgba(var(--personal-purple-rgb), 0.2);
}
[data-bs-theme="dark"] .personal-badge-lilac {
    color: var(--personal-lilac);
    background-color: rgba(var(--personal-lilac-rgb), 0.16);
}

.personal-badge-tangerine {
    background-color: rgba(var(--personal-tangerine-rgb), 0.14);
    color: #b35400;
    border-color: rgba(var(--personal-tangerine-rgb), 0.3);
}
[data-bs-theme="dark"] .personal-badge-tangerine {
    color: var(--personal-tangerine);
    background-color: rgba(var(--personal-tangerine-rgb), 0.18);
}

.personal-badge-crimson {
    background-color: rgba(var(--personal-crimson-rgb), 0.12);
    color: var(--personal-crimson);
    border-color: rgba(var(--personal-crimson-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-crimson {
    color: #ef4444;
    background-color: rgba(var(--personal-crimson-rgb), 0.2);
}

.personal-badge-chartreuse {
    background-color: rgba(var(--personal-chartreuse-rgb), 0.16);
    color: #5c7a0f;
    border-color: rgba(var(--personal-chartreuse-rgb), 0.32);
}
[data-bs-theme="dark"] .personal-badge-chartreuse {
    color: var(--personal-chartreuse);
    background-color: rgba(var(--personal-chartreuse-rgb), 0.2);
}

.personal-badge-orchid {
    background-color: rgba(var(--personal-orchid-rgb), 0.12);
    color: var(--personal-orchid);
    border-color: rgba(var(--personal-orchid-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-orchid {
    color: #e879f9;
    background-color: rgba(var(--personal-orchid-rgb), 0.18);
}

.personal-badge-mocha {
    background-color: rgba(var(--personal-mocha-rgb), 0.16);
    color: var(--personal-mocha);
    border-color: rgba(var(--personal-mocha-rgb), 0.3);
}
[data-bs-theme="dark"] .personal-badge-mocha {
    color: #c99a7f;
}

.personal-badge-peach {
    background-color: rgba(var(--personal-peach-rgb), 0.2);
    color: #9a4a1f;
    border-color: rgba(var(--personal-peach-rgb), 0.4);
}
[data-bs-theme="dark"] .personal-badge-peach {
    color: var(--personal-peach);
    background-color: rgba(var(--personal-peach-rgb), 0.22);
}

.personal-badge-cerulean {
    background-color: rgba(var(--personal-cerulean-rgb), 0.12);
    color: var(--personal-cerulean);
    border-color: rgba(var(--personal-cerulean-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-badge-cerulean {
    color: #38bdf8;
    background-color: rgba(var(--personal-cerulean-rgb), 0.2);
}

.personal-badge-butter {
    background-color: rgba(var(--personal-butter-rgb), 0.24);
    color: #8a6d1f;
    border-color: rgba(var(--personal-butter-rgb), 0.45);
}
[data-bs-theme="dark"] .personal-badge-butter {
    color: var(--personal-butter);
    background-color: rgba(var(--personal-butter-rgb), 0.2);
}

/* ============================================================
   3. Icon Boxes (.personal-icon-box, .personal-icon-*)
   ============================================================ */
.personal-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.personal-icon-box:hover {
    transform: translateY(-2px);
}

.personal-icon-sm {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
    border-radius: 0.5rem;
}

.personal-icon-lg {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    border-radius: 1rem;
}

.personal-icon-cyan {
    background-color: rgba(var(--personal-cyan-rgb), 0.12);
    color: #008fa0;
    box-shadow: 0 4px 14px rgba(var(--personal-cyan-rgb), 0.2);
}
[data-bs-theme="dark"] .personal-icon-cyan {
    color: var(--personal-cyan);
    background-color: rgba(var(--personal-cyan-rgb), 0.16);
}

.personal-icon-mint {
    background-color: rgba(var(--personal-mint-rgb), 0.12);
    color: #009676;
    box-shadow: 0 4px 14px rgba(var(--personal-mint-rgb), 0.2);
}
[data-bs-theme="dark"] .personal-icon-mint {
    color: var(--personal-mint);
    background-color: rgba(var(--personal-mint-rgb), 0.16);
}

.personal-icon-purple {
    background-color: rgba(var(--personal-purple-rgb), 0.12);
    color: var(--personal-purple);
    box-shadow: 0 4px 14px rgba(var(--personal-purple-rgb), 0.2);
}
[data-bs-theme="dark"] .personal-icon-purple {
    color: #9b95ff;
}

.personal-icon-gold {
    background-color: rgba(var(--personal-gold-rgb), 0.15);
    color: #9c7f1a;
    box-shadow: 0 4px 14px rgba(var(--personal-gold-rgb), 0.25);
}
[data-bs-theme="dark"] .personal-icon-gold {
    color: var(--personal-gold);
}

/* ============================================================
   4. Utility Text & Background Classes
   ============================================================ */
.personal-text-cyan { color: var(--personal-cyan) !important; }
.personal-text-mint { color: var(--personal-mint) !important; }
.personal-text-fuchsia { color: var(--personal-fuchsia) !important; }
.personal-text-purple { color: var(--personal-purple) !important; }
.personal-text-gold { color: var(--personal-gold) !important; }
.personal-text-terracotta { color: var(--personal-terracotta) !important; }
.personal-text-sage { color: var(--personal-sage) !important; }
.personal-text-yellow { color: var(--personal-yellow) !important; }
.personal-text-pink { color: var(--personal-pink) !important; }
.personal-text-tangerine { color: var(--personal-tangerine) !important; }
.personal-text-crimson { color: var(--personal-crimson) !important; }
.personal-text-chartreuse { color: var(--personal-chartreuse) !important; }
.personal-text-orchid { color: var(--personal-orchid) !important; }
.personal-text-mocha { color: var(--personal-mocha) !important; }
.personal-text-peach { color: var(--personal-peach) !important; }
.personal-text-cerulean { color: var(--personal-cerulean) !important; }
.personal-text-butter { color: var(--personal-butter) !important; }

/* ============================================================
   5. Interactive Swatch Cards in Settings
   ============================================================ */
.personal-color-swatch-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    user-select: none;
    border-radius: 0.85rem;
    border: 1px solid var(--bs-border-color-translucent, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="light"] .personal-color-swatch-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

.personal-color-swatch-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

.personal-color-swatch-card:active {
    transform: scale(0.97);
}