@import url("./icons.css");

/*
 * MySocials.Info — Shared Site Theme Variables
 * Included on all SaaS-facing pages.
 * Page-specific overrides go in inline <style> blocks on each page.
 */

:root {
    --bg:          #0F2438;
    --panel:       #1C3552;
    --deep:        #081826;
    --text:        #C8DCE8;
    --text-muted:  #6A8EA8;
    --text-dim:    #3A5470;
    --border:      #1C3552;
    --border-mid:  #2A4A68;
    --green:       #2FA35B;
    --green-deep:  #1F6D42;
    --yellow:      #E5C14A;
    --blue:        #2281F5;
    --orange:      #D9823B;
    --red:         #C7463B;
}

body[data-theme="light"] {
    --bg:          #F0F4F8;
    --panel:       #FFFFFF;
    --deep:        #E0E8F0;
    --text:        #081826;
    --text-muted:  #0F2438;
    --text-dim:    #1C3552;
    --border:      #D0D8E4;
    --border-mid:  #2A4A68;
}

/* ── CRT scanlines (dark mode only) ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.10) 3px,
        rgba(0, 0, 0, 0.10) 4px
    );
    pointer-events: none;
    z-index: 9999;
}
body[data-theme="light"]::before { display: none; }

/* ── Theme toggle button ── */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle .material-symbols-rounded { font-size: 20px; }

/* ── Compact public language picker ── */
.site-lang-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.site-lang-select {
    appearance: none;
    background: var(--deep);
    color: var(--text-muted);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    padding: 7px 28px 7px 10px;
    font-family: 'Hack', 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 84px;
    cursor: pointer;
}

.site-lang-select:hover,
.site-lang-select:focus {
    color: var(--text);
    border-color: var(--green);
    outline: none;
}

body[data-theme="light"] .site-lang-select {
    background: var(--deep);
    color: var(--text-muted);
}