:root{
    --primary:#4f7cff;
    --secondary:#7c3aed;
    --accent:#00e7a5;
    --bg:#070b14;
    --surface:#101827;
    --surface-soft:#121d2f;
    --surface-muted:#0c1322;
    --text:#eaeaea;
    --text-muted:#94a3b8;
    --border:rgba(255,255,255,.18);
    --border-strong:rgba(255,255,255,.30);

    --radius-sm:8px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:32px;

    --shadow:0 18px 55px rgba(0,0,0,.26);
    --shadow-soft:0 12px 34px rgba(0,0,0,.18);
    --shadow-glow:0 24px 80px rgba(79,124,255,.22);

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;
    --space-9:80px;
    --space-10:120px;

    --font-ui:"Vazirmatn","IRANSansX","Dana",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --container:1180px;
    --container-lg:1280px;
    --container-padding:clamp(16px,4vw,48px);
    --section-space:clamp(48px,7vw,96px);
    --header-desktop:80px;
    --header-tablet:72px;
    --header-mobile:64px;
    --touch-target:44px;
    --button-height:46px;
    --mobile-menu-item-height:56px;
    --tab-height:44px;
    --footer-gap:clamp(24px,4vw,48px);
}

/* Component typography and sizing tokens: card-first design system */
:root{
    --text-xs:12px;
    --text-sm:14px;
    --text-md:15px;
    --text-lg:16px;

    --card-title-sm:clamp(20px,1.6vw,26px);
    --card-title-md:clamp(24px,2vw,32px);
    --card-title-lg:clamp(26px,2.3vw,36px);
    --feature-card-title-size:clamp(24px,2vw,34px);
    --contact-card-title-size:clamp(20px,1.6vw,26px);
    --course-card-title-size:clamp(24px,2vw,32px);

    --section-title-size:clamp(30px,3vw,46px);
    --hero-title-size:clamp(34px,4.2vw,60px);

    --card-min-small:120px;
    --card-min-normal:220px;
    --card-min-course:520px;
    --card-padding-mobile:18px;
    --card-padding-normal:24px;
    --card-padding-large:28px;
    --card-radius-normal:24px;
    --card-radius-large:28px;
    --card-media-course:clamp(150px,14vw,200px);
    --card-media-course-mobile:clamp(140px,42vw,170px);
}

/* Semantic theme tokens: production light/dark contrast layer */
:root,
[data-theme="dark"]{
    --bg-page:#070b14;
    --bg-surface:#101827;
    --bg-surface-strong:#0d1424;
    --bg-card:#111827;
    --bg-card-hover:#162033;
    --bg-card-media:linear-gradient(135deg,rgba(79,124,255,.22),rgba(124,58,237,.26));
    --bg-chip:rgba(255,255,255,.055);
    --bg-input:#0d1524;

    --text-primary:#f8fafc;
    --text-secondary:#cbd5e1;
    --text-muted:#9aa8bd;
    --text-on-dark:#f8fafc;
    --text-on-accent:#ffffff;

    --border-soft:rgba(148,163,184,.22);
    --border-strong:rgba(148,163,184,.38);

    --accent:var(--primary);
    --accent-hover:#6d8cff;
    --accent-soft:rgba(79,124,255,.14);

    --shadow-card:0 18px 48px rgba(0,0,0,.24);
    --shadow-card-hover:0 26px 70px rgba(0,0,0,.32);
    --shadow-menu:0 24px 70px rgba(0,0,0,.34);

    --bg:var(--bg-page);
    --surface:var(--bg-surface);
    --surface-soft:var(--bg-surface-strong);
    --surface-muted:#0a1120;
    --text:var(--text-primary);
    --border:var(--border-soft);
}

.light-theme,
[data-theme="light"]{
    --bg-page:#f5f7ff;
    --bg-surface:#ffffff;
    --bg-surface-strong:#f8fbff;
    --bg-card:#ffffff;
    --bg-card-hover:#f1f5ff;
    --bg-card-media:linear-gradient(135deg,#e8efff,#f0e9ff);
    --bg-chip:#ffffff;
    --bg-input:#ffffff;

    --text-primary:#111827;
    --text-secondary:#334155;
    --text-muted:#64748b;
    --text-on-dark:#f8fafc;
    --text-on-accent:#ffffff;

    --border-soft:#d8deea;
    --border-strong:#bbc6d7;

    --accent:#5b63ff;
    --accent-hover:#4f46e5;
    --accent-soft:rgba(91,99,255,.13);

    --shadow-card:0 18px 48px rgba(30,41,59,.10);
    --shadow-card-hover:0 26px 70px rgba(79,70,229,.18);
    --shadow-menu:0 24px 60px rgba(30,41,59,.18);

    --bg:var(--bg-page);
    --surface:var(--bg-surface);
    --surface-soft:var(--bg-surface-strong);
    --surface-muted:#eef2ff;
    --text:var(--text-primary);
    --border:var(--border-soft);
}

:root{
    --card-grid-min:280px;
    --card-grid-max:420px;
    --card-grid-gap:24px;
    --card-padding-compact:clamp(16px,2vw,24px);
    --card-media-compact:clamp(140px,13vw,190px);
    --card-button-height:46px;
    --brand-accent-2:#7c3aed;
}