/* ============================================================
   theme-tokens.css — self-contained design tokens (light + dark)
   For STANDALONE pages that DON'T extend base.html (login, register,
   error pages, popups, legal, OTP…). They were migrated onto var(--token)
   but never loaded the token definitions, so var()s were undefined.
   Loading this (+ the tiny data-theme boot script) makes those pages render
   correctly and support BOTH themes — dark mode is neutral monochrome.
   ============================================================ */
:root {
    color-scheme: light dark;
    --primary:#667eea; --primary-dark:#5a6fd6; --primary-light:#8b9bf5; --primary-rgb:102,126,234;
    --accent-purple:#764ba2; --accent-gold:#ffd700;
    --gradient-primary:linear-gradient(135deg,var(--sld-brand) 0%,var(--sld-brand) 100%);

    --bg:#f7f8fa; --bg-card:#ffffff; --bg-subtle:#f8fafc; --bg-muted:#f1f5f9;
    --bg-primary:#f7f8fa; --bg-secondary:#ffffff; --bg-tertiary:#f1f5f9;
    --card-bg:#ffffff; --input-bg:#ffffff; --hover-bg:#f1f5f9; --shadow-color:rgba(0,0,0,.08);
    --bg-light:var(--bg-subtle); --transition:var(--speed) var(--ease);
    --text-primary:#1e293b; --text-secondary:#475569; --text-muted:#64748b; --border-color:#e5e7eb;

    --success-bg:#dcfce7; --success-text:#059669; --danger-bg:#fee2e2; --danger-text:#dc2626;
    --warning-bg:#fef3c7; --warning-text:#d97706; --info-bg:#dbeafe; --info-text:#2563eb;
    --brand-bg:#ede9fe; --brand-text:#667eea;
    --sld-brand:#667eea; --sld-success:#10b981; --sld-danger:#ef4444; --sld-warning:#f59e0b; --sld-info:#3b82f6;

    --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-400:#94a3b8;
    --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; --gray-800:#1e293b; --gray-900:#0f172a;

    --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 1px 3px rgba(0,0,0,.06);
    --shadow-md:0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 12px 32px rgba(0,0,0,.10); --shadow-xl:0 24px 48px rgba(0,0,0,.14);
    --ease:cubic-bezier(.4,0,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --speed-fast:.15s; --speed:.25s; --speed-slow:.35s;
}
[data-theme="dark"] {
    color-scheme: dark;
    --gradient-primary:linear-gradient(135deg,var(--sld-brand) 0%,var(--sld-brand) 100%);
    --bg:#0b0b0b; --bg-card:#1b1b1b; --bg-subtle:#151515; --bg-muted:#202024;
    --bg-primary:#0b0b0b; --bg-secondary:#1b1b1b; --bg-tertiary:#151515;
    --card-bg:#1b1b1b; --input-bg:#151515; --hover-bg:#272727; --shadow-color:rgba(0,0,0,.65);
    --text-primary:#f5f5f5; --text-secondary:#b9b9b9; --text-muted:#8d8d8d; --border-color:#2e2e2e;

    --success-bg:#26262c; --success-text:#f0f0f0; --danger-bg:#26262c; --danger-text:#f0f0f0;
    --warning-bg:#26262c; --warning-text:#f0f0f0; --info-bg:#26262c; --info-text:#f0f0f0;
    --brand-bg:#26262c; --brand-text:#d4d4d8;
    --sld-brand:#33333a; --sld-success:#33333a; --sld-danger:#33333a; --sld-warning:#33333a; --sld-info:#33333a;

    --gray-50:#151515; --gray-100:#1b1b1b; --gray-200:#2e2e2e; --gray-300:#3a3a3a; --gray-400:#8d8d8d;
    --gray-500:#b9b9b9; --gray-600:#c9c9c9; --gray-700:#e0e0e0; --gray-800:#f0f0f0; --gray-900:#f5f5f5;
}

/* Body + generic element defaults so a bare standalone page is dark-correct */
[data-theme="dark"] body { background:var(--bg); color:var(--text-primary); }
[data-theme="dark"] a { color:var(--brand-text); }
[data-theme="dark"] hr { border-color:var(--border-color); }

/* Universal input contrast (typed text light, field dark, placeholder readable, autofill fixed) */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea, [data-theme="dark"] select {
    background-color:var(--input-bg) !important; color:var(--text-primary) !important;
    border-color:var(--border-color); -webkit-text-fill-color:var(--text-primary); caret-color:var(--text-primary);
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color:var(--text-muted) !important; opacity:1; }
[data-theme="dark"] select option { background-color:var(--bg-card); color:var(--text-primary); }
[data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus, [data-theme="dark"] textarea:-webkit-autofill {
    -webkit-text-fill-color:var(--text-primary) !important; caret-color:var(--text-primary) !important;
    -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset !important; box-shadow:0 0 0 1000px var(--input-bg) inset !important;
    transition:background-color 5000s ease-in-out 0s;
}