/* ══════════════════════════════════════════════
   Design Tokens — Privy ID OAuth2
   Single source of truth for all visual values.
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    /* ── Brand ── */
    --color-primary: #dc2626;
    --color-primary-hover: #b91c1c;
    --color-primary-active: #991b1b;
    --color-primary-subtle: #fef2f2;
    --color-primary-ring: rgba(220, 38, 38, 0.08);
    --color-primary-shadow: rgba(220, 38, 38, 0.25);

    /* ── Neutrals ── */
    --color-white: #ffffff;
    --color-bg: #f5f5f5;
    --color-bg-subtle: #f9fafb;
    --color-bg-muted: #f3f4f6;

    /* ── Text ── */
    --color-text: #1a1a1a;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-faint: #9ca3af;

    /* ── Borders ── */
    --color-border: #e5e7eb;
    --color-border-muted: #f3f4f6;
    --color-border-input: #d1d5db;

    /* ── Semantic ── */
    --color-success: #16a34a;
    --color-success-subtle: #f0fdf4;
    --color-info: #2563eb;
    --color-info-subtle: #eff6ff;
    --color-warning: #d97706;
    --color-warning-subtle: #fffbeb;
    --color-warning-border: #fde68a;
    --color-danger: #dc2626;
    --color-danger-subtle: #fef2f2;
    --color-danger-border: #fecaca;

    /* ── Toast (kept distinct for legacy compat) ── */
    --color-toast-success: #51a351;
    --color-toast-error: #bd362f;
    --color-toast-info: #2f96b4;
    --color-toast-warning: #f89406;

    /* ── Typography ── */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 22px;

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;

    /* ── Radii ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* ── Transitions ── */
    --transition-fast: 0.12s ease;
    --transition-base: 0.15s ease;

    /* ── Layout ── */
    --topbar-height: 56px;
    --sidebar-width: 260px;
    --card-max-width: 440px;
    --input-height: 44px;
    --btn-height: 48px;
}