/* authify-theme.css
 *
 * Mycelis-compatible design tokens.
 * Dark mode is DEFAULT. Light mode via [data-theme="light"].
 *
 * The --auth-primary-NNN-rgb variables are kept for ProfileLayout
 * Tailwind utility classes (auth-bg-primary-*, auth-text-primary-*).
 * All other theming now uses the Mycelis CSS variable set so that
 * Authify pages are visually consistent with the Mycelis dashboard.
 */

/* ── Dark Mode (default) ──────────────────────────────────────────── */
:root {
    /* Mycelis design tokens */
    --bg:             #101214;
    --bg-surface:     #171a1f;
    --bg-elevated:    #1f242b;
    --text-primary:   #f5f7fb;
    --text-secondary: #c2c9d4;
    --text-muted:     #9aa3b2;
    --accent:         #f5f7fb;
    --accent-subtle:  rgba(245, 247, 251, 0.1);
    --border:         rgba(255, 255, 255, 0.16);
    --outline:        rgba(255, 255, 255, 0.28);
    --error:          #ef4444;
    --success:        #10b981;

    /* Primary palette – RGB triplets for Tailwind utility classes
       (auth-bg-primary-600, auth-text-primary-400, etc.)           */
    --auth-primary-50-rgb:  238 242 255;
    --auth-primary-100-rgb: 224 231 255;
    --auth-primary-200-rgb: 199 210 254;
    --auth-primary-300-rgb: 165 180 252;
    --auth-primary-400-rgb: 129 140 248;
    --auth-primary-500-rgb: 99  102 241;
    --auth-primary-600-rgb: 79  70  229;
    --auth-primary-700-rgb: 67  56  202;
    --auth-primary-800-rgb: 55  48  163;
    --auth-primary-900-rgb: 49  46  129;
    --auth-primary-950-rgb: 30  27  75;
}

/* ── Light Mode ───────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg:             #F5F5F2;
    --bg-surface:     #FFFFFF;
    --bg-elevated:    #ECECEA;
    --text-primary:   #0A0A0A;
    --text-secondary: #666666;
    --text-muted:     #AAAAAA;
    --accent:         #0A0A0A;
    --accent-subtle:  rgba(0, 0, 0, 0.04);
    --border:         rgba(0, 0, 0, 0.08);
    --outline:        rgba(0, 0, 0, 0.12);
    --error:          #ef4444;
    --success:        #10b981;
}

/* ── System preference fallback ───────────────────────────────────── */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg:             #F5F5F2;
        --bg-surface:     #FFFFFF;
        --bg-elevated:    #ECECEA;
        --text-primary:   #0A0A0A;
        --text-secondary: #666666;
        --text-muted:     #AAAAAA;
        --accent:         #0A0A0A;
        --accent-subtle:  rgba(0, 0, 0, 0.04);
        --border:         rgba(0, 0, 0, 0.08);
        --outline:        rgba(0, 0, 0, 0.12);
    }
}