/* ==========================================================================
   Base
   Design tokens, reset, and the layout utilities every section uses.
   ========================================================================== */

:root {
    --bg: #121212;
    --surface: #1E1E1E;
    --text: #F9FAFB;
    --muted: #9CA3AF;
    --accent: #F4501E;
    --accent-hover: #FF6A3D;
    --teal: #45B7AE;
    --indigo: #6366F1;
    --indigo-hover: #7476F5;
    --amber: #F59E0B;
    --line: rgba(255, 255, 255, .09);
    --line-soft: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .16);
    --gutter: 80px;
    --frame-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Tajawal, "Segoe UI", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: var(--text);
    text-decoration: none;
}

h1,
h2,
h3,
p,
figure {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 0 0 12px 12px;
}

.skip-link:focus {
    inset-inline-start: 0;
}

.pad {
    padding-inline: var(--gutter);
}

.rule {
    border-top: 1px solid var(--line);
}

/* tablet ---------------------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 901px) {
    :root {
        --gutter: 48px;
    }
}

/* mobile ---------------------------------------------------------------- */

@media (max-width: 900px) {
    :root {
        --gutter: 20px;
    }
}

/* reduced motion -------------------------------------------------------- */

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

    * {
        transition-duration: .01ms !important;
    }
}