/* CSS Custom Properties and Theme Variables */
:root {
    /* Brand Colors */
    --sociail-yellow: #f9d949;
    --sociail-blue: #0066ff;

    /* Sociail.com canonical brand gradient (indigo -> purple -> indigo) */
    --sociail-indigo: #6366f1;
    --sociail-purple: #9333ea;
    --sociail-indigo-deep: #312e81;
    --sociail-pill-bg: rgba(99, 102, 241, 0.1);
    --sociail-pill-bg-dark: rgba(129, 140, 248, 0.16);
    --sociail-pill-text-dark: #c7d2fe;

    /* Semantic Colors */
    --success-color: #34c759;
    --error-color: #ff3b30;
    --warning-color: #ff9500;

    /* Text Colors */
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;

    /* Background Colors */
    --bg-primary: #fbfbfd;
    --bg-secondary: #f5f5f7;

    /* Border & UI */
    --border-color: rgba(0, 0, 0, 0.1);
    --screen-color: #3375e0;
    --arrow-color: rgba(0, 102, 255, 0.6);
    --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --glass-panel: rgba(255, 255, 255, 0.72);
    --glass-card: rgba(255, 255, 255, 0.66);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-edge: rgba(99, 102, 241, 0.16);
    --glass-shadow: 0 30px 90px rgba(31, 41, 55, 0.12);
    --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #f5f5f7;
        --text-secondary: #a1a1a6;
        --bg-primary: #000000;
        --bg-secondary: #1c1c1e;
        --border-color: rgba(255, 255, 255, 0.1);
        --screen-color: #007aff;
        --glass-panel: rgba(24, 24, 27, 0.68);
        --glass-card: rgba(17, 24, 39, 0.62);
        --glass-border: rgba(255, 255, 255, 0.14);
        --glass-edge: rgba(165, 180, 252, 0.2);
        --glass-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
        --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

[data-theme="dark"] {
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --border-color: rgba(255, 255, 255, 0.1);
    --screen-color: #007aff;
    --glass-panel: rgba(24, 24, 27, 0.68);
    --glass-card: rgba(17, 24, 39, 0.62);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-edge: rgba(165, 180, 252, 0.2);
    --glass-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
    --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="light"] {
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --bg-primary: #fbfbfd;
    --bg-secondary: #f5f5f7;
    --border-color: rgba(0, 0, 0, 0.1);
    --screen-color: #3375e0;
    --glass-panel: rgba(255, 255, 255, 0.72);
    --glass-card: rgba(255, 255, 255, 0.66);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-edge: rgba(99, 102, 241, 0.16);
    --glass-shadow: 0 30px 90px rgba(31, 41, 55, 0.12);
    --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}