* {
    font-family: Vazirmatn, ui-sans-serif, system-ui, -apple-system,
    Segoe UI, Roboto, "Helvetica Neue", Arial;
}

::selection {
    background: rgba(0, 198, 165, 0.22);
}


.nav-link {
    position: relative;
    border-radius: 9999px;
}

.nav-link-text {
    transition: color 180ms ease, text-shadow 180ms ease;
}


.nav-link:hover .nav-link-text {
    color: #00c6a5;
}


.nav-link:focus-visible {
    outline: none;
}

.nav-link:focus-visible .nav-link-text {
    color: #00c6a5;
    text-shadow: 0 0 12px rgba(0, 198, 165, 0.9);
}

/* =========================
   THEME TOKENS (LIGHT/DARK)
   ========================= */
:root {
    --page-bg: #f8fafc;
    --page-bg2: #f8fafc;

    --surface-1: rgba(255, 255, 255, 0.96);
    --surface-2: rgba(248, 250, 252, 0.92);
    --surface-3: rgba(255, 255, 255, 0.9);

    --border: rgba(226, 232, 240, 0.78);
    --borderAccent: rgba(0, 198, 165, 0.18);

    --text: #0f172a;
    --text-2: #334155;
    --muted: #64748b;

    --chip: rgba(15, 23, 42, 0.92);
    --chipText: #ffffff;

    --nav: rgba(255, 255, 255, 0.8);

    --ringSoft: rgba(0, 198, 165, 0.18);
    --hoverLift: 1;
}

.dark {
    /* Premium dark background */
    --page-bg: #050814;
    --page-bg2: #070b18;

    /* Solid surfaces */
    --surface-1: #0b1224;
    --surface-2: #0f1a33;
    --surface-3: #0a1022;

    /* Borders */
    --border: rgba(255, 255, 255, 0.1);
    --borderAccent: rgba(0, 198, 165, 0.24);

    /* Text */
    --text: #eaf1ff;
    --text-2: #cdd9ee;
    --muted: #9fb0c9;

    --chip: rgba(255, 255, 255, 0.1);
    --chipText: #eaf1ff;

    --nav: rgba(5, 8, 20, 0.68);

    --ringSoft: rgba(0, 198, 165, 0.22);
    --hoverLift: 1;
}

/* =========================
   BACKGROUNDS
   ========================= */
.bg-pro-light {
    background-image: radial-gradient(
            900px 420px at 75% 15%,
            rgba(0, 198, 165, 0.12),
            transparent 62%
    ),
    radial-gradient(
            900px 420px at 25% 85%,
            rgba(0, 198, 165, 0.08),
            transparent 62%
    ),
    linear-gradient(to bottom, var(--page-bg), var(--page-bg2));
}

.bg-pro-dark {
    background-image: radial-gradient(
            900px 420px at 70% 10%,
            rgba(0, 198, 165, 0.22),
            transparent 60%
    ),
    radial-gradient(
            900px 420px at 20% 90%,
            rgba(0, 198, 165, 0.14),
            transparent 62%
    ),
    radial-gradient(
            700px 320px at 55% 55%,
            rgba(0, 198, 165, 0.09),
            transparent 72%
    ),
    linear-gradient(to bottom, var(--page-bg), var(--page-bg2));
}

.grid-subtle {
    background-image: radial-gradient(
            rgba(0, 198, 165, 0.14) 1px,
            transparent 1px
    );
    background-size: 22px 22px;
    background-position: 0 0;
    mask-image: radial-gradient(
            ellipse at center,
            black 52%,
            transparent 78%
    );
    opacity: 0.12;
}

.dark .grid-subtle {
    opacity: 0.18;
}

.glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* =========================
   SURFACES / BORDERS / TEXT
   ========================= */
.surface {
    background: var(--surface-1);
}

.surface-2 {
    background: var(--surface-2);
}

.surface-3 {
    background: var(--surface-3);
}

.border-soft {
    border-color: var(--border);
}

.border-accent {
    border-color: var(--borderAccent);
}

.t-main {
    color: var(--text);
}

.t-soft {
    color: var(--text-2);
}

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

.chip {
    background: var(--chip);
    color: var(--chipText);
    border: 1px solid var(--border);
}

.nav-bg {
    background: var(--nav);
}

/* ===== Global polish helpers ===== */
.btn-focus:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ringSoft);
}

/* cards hover */
.hover-card {
    transition: box-shadow 220ms ease, border-color 220ms ease;
}

.hover-card:hover {
    box-shadow: 0 0 0 1px rgba(0, 198, 165, 0.14),
    0 22px 70px rgba(2, 6, 23, 0.18);
    border-color: rgba(0, 198, 165, 0.22);
}

.dark .hover-card:hover {
    box-shadow: 0 0 0 1px rgba(0, 198, 165, 0.16),
    0 26px 90px rgba(0, 0, 0, 0.55);
    border-color: rgba(0, 198, 165, 0.22);
}