/* ============================================
   The Unknot Spot - Global Stylesheet
   ============================================ */

/* --- CSS Variables --- */
:root {
    --color-main:           #fbfbfb;
    --color-purple:         #b661fd;  /* Bubblegum Baby Girl */
    --color-blue:           #0171fe;  /* Deep Sky Blue */
    --color-lime:           #dcf803;  /* Lime Zest */
    --color-neon-yellow:    #d4ff08;  /* Neon Yellow */
    --color-hot-magenta:    #ff10cf;  /* Hot Magenta */
    --color-out-of-blue:    #0391e8;  /* Out of the Blue */
}

/* ============================================
   BASE / MAIN - #fbfbfb
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-main);
    margin: 0 0 0.5em;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p, li, td, th, label, input, textarea, select, span {
    color: var(--color-main);
}

a {
    color: var(--color-main);
    text-decoration: underline;
}

a:hover {
    opacity: 0.8;
}

.spacer {
    flex: 1;
}

/* ============================================
   BUBBLEGUM BABY GIRL - #b661fd (Purple)
   ============================================ */
.purple h1, .purple h2, .purple h3,
.purple h4, .purple h5, .purple h6 { color: var(--color-purple); }

.text-purple        { color: var(--color-purple); }
.bg-purple          { background-color: var(--color-purple); }
.border-purple      { border-color: var(--color-purple); }
.btn-purple {
    background-color: var(--color-purple);
    color: #fff;
    border: 2px solid var(--color-purple);
    padding: 0.5em 1.25em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    text-decoration: none;
}
.btn-purple:hover   { opacity: 0.85; }
.link-purple        { color: var(--color-purple); text-decoration: underline; }
.link-purple:hover  { opacity: 0.8; }
.divider-purple     { border: none; border-top: 2px solid var(--color-purple); }
.badge-purple {
    background-color: var(--color-purple);
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* ============================================
   DEEP SKY BLUE - #0171fe (Blue)
   ============================================ */
.blue h1, .blue h2, .blue h3,
.blue h4, .blue h5, .blue h6 { color: var(--color-blue); }

.text-blue          { color: var(--color-blue); }
.bg-blue            { background-color: var(--color-blue); }
.border-blue        { border-color: var(--color-blue); }
.btn-blue {
    background-color: var(--color-blue);
    color: #fff;
    border: 2px solid var(--color-blue);
    padding: 0.5em 1.25em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    text-decoration: none;
}
.btn-blue:hover     { opacity: 0.85; }
.link-blue          { color: var(--color-blue); text-decoration: underline; }
.link-blue:hover    { opacity: 0.8; }
.divider-blue       { border: none; border-top: 2px solid var(--color-blue); }
.badge-blue {
    background-color: var(--color-blue);
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* ============================================
   LIME ZEST - #dcf803 (Yellow-Green)
   ============================================ */
.lime h1, .lime h2, .lime h3,
.lime h4, .lime h5, .lime h6 { color: var(--color-lime); }

.text-lime          { color: var(--color-lime); }
.bg-lime            { background-color: var(--color-lime); }
.border-lime        { border-color: var(--color-lime); }
.btn-lime {
    background-color: var(--color-lime);
    color: #111;
    border: 2px solid var(--color-lime);
    padding: 0.5em 1.25em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    text-decoration: none;
}
.btn-lime:hover     { opacity: 0.85; }
.link-lime          { color: var(--color-lime); text-decoration: underline; }
.link-lime:hover    { opacity: 0.8; }
.divider-lime       { border: none; border-top: 2px solid var(--color-lime); }
.badge-lime {
    background-color: var(--color-lime);
    color: #111;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* ============================================
   NEON YELLOW - #d4ff08 (Greenish Yellow)
   ============================================ */
.neon-yellow h1, .neon-yellow h2, .neon-yellow h3,
.neon-yellow h4, .neon-yellow h5, .neon-yellow h6 { color: var(--color-neon-yellow); }

.text-neon-yellow   { color: var(--color-neon-yellow); }
.bg-neon-yellow     { background-color: var(--color-neon-yellow); }
.border-neon-yellow { border-color: var(--color-neon-yellow); }
.btn-neon-yellow {
    background-color: var(--color-neon-yellow);
    color: #111;
    border: 2px solid var(--color-neon-yellow);
    padding: 0.5em 1.25em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    text-decoration: none;
}
.btn-neon-yellow:hover  { opacity: 0.85; }
.link-neon-yellow       { color: var(--color-neon-yellow); text-decoration: underline; }
.link-neon-yellow:hover { opacity: 0.8; }
.divider-neon-yellow    { border: none; border-top: 2px solid var(--color-neon-yellow); }
.badge-neon-yellow {
    background-color: var(--color-neon-yellow);
    color: #111;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* ============================================
   HOT MAGENTA - #ff10cf
   ============================================ */
.magenta h1, .magenta h2, .magenta h3,
.magenta h4, .magenta h5, .magenta h6 { color: var(--color-hot-magenta); }

.text-magenta       { color: var(--color-hot-magenta); }
.bg-magenta         { background-color: var(--color-hot-magenta); }
.border-magenta     { border-color: var(--color-hot-magenta); }
.btn-magenta {
    background-color: var(--color-hot-magenta);
    color: #fff;
    border: 2px solid var(--color-hot-magenta);
    padding: 0.5em 1.25em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    text-decoration: none;
}
.btn-magenta:hover  { opacity: 0.85; }
.link-magenta       { color: var(--color-hot-magenta); text-decoration: underline; }
.link-magenta:hover { opacity: 0.8; }
.divider-magenta    { border: none; border-top: 2px solid var(--color-hot-magenta); }
.badge-magenta {
    background-color: var(--color-hot-magenta);
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* ============================================
   OUT OF THE BLUE - #0391e8
   ============================================ */
.sky h1, .sky h2, .sky h3,
.sky h4, .sky h5, .sky h6 { color: var(--color-out-of-blue); }

.text-sky           { color: var(--color-out-of-blue); }
.bg-sky             { background-color: var(--color-out-of-blue); }
.border-sky         { border-color: var(--color-out-of-blue); }
.btn-sky {
    background-color: var(--color-out-of-blue);
    color: #fff;
    border: 2px solid var(--color-out-of-blue);
    padding: 0.5em 1.25em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    text-decoration: none;
}
.btn-sky:hover      { opacity: 0.85; }
.link-sky           { color: var(--color-out-of-blue); text-decoration: underline; }
.link-sky:hover     { opacity: 0.8; }
.divider-sky        { border: none; border-top: 2px solid var(--color-out-of-blue); }
.badge-sky {
    background-color: var(--color-out-of-blue);
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* ============================================
   UTILITY CLASSES (shared)
   ============================================ */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-bold      { font-weight: bold; }
.text-italic    { font-style: italic; }
.text-uppercase { text-transform: uppercase; }
.text-sm        { font-size: 0.875rem; }
.text-lg        { font-size: 1.25rem; }
.text-xl        { font-size: 1.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.p-1  { padding: 0.5rem; }
.p-2  { padding: 1rem; }
.p-3  { padding: 1.5rem; }