/* === Design Tokens === */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #a5b4fc;
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --accent: #06b6d4;
    --success: #059669;
    --success-50: #ecfdf5;
    --success-600: #059669;
    --warning: #f59e0b;
    --warning-50: #fffbeb;
    --warning-600: #d97706;
    --danger: #ef4444;
    --text: #0f172a;
    --text-2: #334155;
    --text-3: #475569;
    --text-4: #64748b;
    --bg: #f1f5f9;
    --surface: #ffffff;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --radius-lg: 20px;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === Footer (shared) === */
.app-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-4);
}
.app-footer a {
    color: var(--text-4);
    text-decoration: none;
}
.app-footer a:hover {
    color: var(--primary);
    text-decoration: underline;
}
.footer-sep {
    margin: 0 0.5rem;
    color: var(--border);
}

/* === RTL Support === */
[dir="rtl"] { direction: rtl; text-align: right; }