/* auth.css — Auth & Admin UI tokens
 *
 * Override these to brand auth pages (login, register, forgot/reset password,
 * profile) and admin pages (user/session management) without modifying templates.
 *
 * Usage:
 *   <link rel="stylesheet" href="/static/motif/tokens.css">
 *   <link rel="stylesheet" href="/static/motif/components.css">
 *   <link rel="stylesheet" href="/static/motif/auth.css">
 *
 * To customize, override any --auth-* or --admin-* variable in your app CSS:
 *   :root { --auth-bg: #1a1a2e; --auth-accent: #e94560; }
 */

:root {
    /* ── Public Auth Pages ─────────────────────────────────── */

    /* Page background (gradient or solid) */
    --auth-bg: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-600) 100%);

    /* Card appearance */
    --auth-card-bg: var(--color-card-bg);
    --auth-card-shadow: var(--shadow-xl);
    --auth-card-radius: var(--radius-xl);
    --auth-card-padding: var(--space-10);
    --auth-card-width: 400px;

    /* Title (logo fallback text) */
    --auth-title-color: var(--color-fg);
    --auth-title-size: var(--text-2xl);

    /* Descriptive text */
    --auth-text-color: var(--color-fg-muted);

    /* Primary action buttons (Sign In, Create Account, etc.) */
    --auth-action-bg: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-600) 100%);
    --auth-action-color: #fff;
    --auth-action-radius: var(--radius-lg);

    /* Links (forgot password, sign up, etc.) */
    --auth-link-color: var(--color-primary-500);

    /* Input focus state */
    --auth-focus-color: var(--color-primary-500);
    --auth-focus-ring: 0 0 0 3px rgba(102, 126, 234, 0.1);

    /* Error alert */
    --auth-error-bg: var(--color-danger-50);
    --auth-error-border: var(--color-danger-100);
    --auth-error-color: var(--color-danger-600);

    /* Success alert */
    --auth-success-bg: var(--color-success-50);
    --auth-success-border: var(--color-success-100);
    --auth-success-color: var(--color-success-600);

    /* ── Admin Pages ──────────────────────────────────────── */

    /* Page background */
    --admin-bg: var(--color-bg);

    /* Header bar */
    --admin-header-bg: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-600) 100%);
    --admin-header-color: #fff;

    /* Accent (search buttons, pagination active, primary actions) */
    --admin-accent: var(--color-primary-500);

    /* Card / table wrapper */
    --admin-card-bg: var(--color-card-bg);
    --admin-card-shadow: var(--shadow-md);
    --admin-card-radius: var(--radius-xl);

    /* Alert (reuses auth tokens by default) */
    --admin-error-bg: var(--auth-error-bg);
    --admin-error-border: var(--auth-error-border);
    --admin-error-color: var(--auth-error-color);
    --admin-success-bg: var(--auth-success-bg);
    --admin-success-border: var(--auth-success-border);
    --admin-success-color: var(--auth-success-color);
}