/* Explain: Base CSS reset and global typography styles. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-color);
    background:
        radial-gradient(circle at 12% -5%, #dceaff 0%, transparent 42%),
        radial-gradient(circle at 100% 4%, #d3f5ff 0%, transparent 40%),
        var(--background-color);
    background-attachment: fixed;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin: 0;
    color: var(--text-color);
}

p { margin: 0; }

img { max-width: 100%; display: block; }

a { color: var(--primary-color); }

.muted { color: var(--text-muted); }

.hint { color: var(--text-muted); font-size: .85rem; margin-top: .4rem; }

.is-hidden { display: none !important; }

.grad-text {
    background: var(--grad-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* RTL: mirror only directional arrows, never decorative icons (chat, heart, envelope…) */
[dir="rtl"] i.fa-arrow-left,
[dir="rtl"] i.fa-arrow-right,
[dir="rtl"] i.fa-chevron-left,
[dir="rtl"] i.fa-chevron-right,
[dir="rtl"] i.fa-angle-left,
[dir="rtl"] i.fa-angle-right,
[dir="rtl"] i.fa-caret-left,
[dir="rtl"] i.fa-caret-right,
[dir="rtl"] i.fa-right-to-bracket { transform: scaleX(-1); }

/* RTL: keep long words and labels inside their cards */
[dir="rtl"] .match-info,
[dir="rtl"] .match-meta,
[dir="rtl"] .conn-body,
[dir="rtl"] .chat-who,
[dir="rtl"] .person-body,
[dir="rtl"] .profile-main,
[dir="rtl"] .notif-body,
[dir="rtl"] .shop-body,
[dir="rtl"] .invite-body,
[dir="rtl"] .legal-card,
[dir="rtl"] .step-panel,
[dir="rtl"] .empty-state,
[dir="rtl"] .code-box,
[dir="rtl"] .chip { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}