/* ============================================================
   SATR BASE — reset, body, scrollbar, shared utilities
   Requires styles/tokens.css BEFORE it.
   Pages must NOT redefine these rules inline.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Tajawal', system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.65;
    direction: rtl;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 214, 143, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

::selection { background: rgba(0, 214, 143, 0.3); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 10px; }

/* Loading skeleton (shared) */
.skeleton {
    background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-hover) 50%, var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeInUp 0.4s ease both; }

/* Clearance above the mobile bottom nav (shared, was copy-pasted per page) */
.page-bottom-spacer { height: 80px; }

/* Phosphor-style spin utility (the icon kit ships no .ph-spin of its own) */
.ph-spin { animation: satr-spin 1s linear infinite; display: inline-block; }

/* Screen-reader-only content */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* Consistent interactive focus across the platform */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}