/* =========================
   NexOra — Shared Design Tokens
   تغییر ظاهر کلی سایت از این فایل انجام می‌شود.
========================= */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --color-bg: #080D24;
    --color-surface: #111A35;
    --color-surface-light: #202943;
    --color-primary: #087CF0;
    --color-cyan: #09C9E8;
    --color-purple: #812DF2;
    --color-pink: #C026FF;
    --color-text: #F4F6FC;
    --color-text-muted: #AAB5D0;
    --color-border: rgba(170, 181, 208, 0.18);
    --gradient-brand: linear-gradient(110deg, var(--color-cyan) 0%, #6388FF 32%, var(--color-purple) 68%, var(--color-pink) 100%);
    --gradient-primary: linear-gradient(110deg, var(--color-primary), var(--color-purple), var(--color-pink));

    /* Button color tokens: adjust these to recolor buttons without changing geometry. */
    --button-primary-bg: linear-gradient(110deg, var(--color-primary), var(--color-purple));
    --button-portfolio-bg: var(--gradient-primary);
    --button-estimate-bg: linear-gradient(110deg, var(--color-cyan), var(--color-primary), var(--color-purple));
    --button-surface-bg: var(--color-surface);
    --button-surface-hover-bg: var(--color-surface-light);
    --button-primary-color: #FFFFFF;
    --button-brand-bg: var(--gradient-brand);
    --button-brand-color: #071526;
    --button-secondary-bg: transparent;
    --button-secondary-color: var(--color-text);
    --button-secondary-border: var(--color-border);
    --button-secondary-hover-bg: rgb(9 201 232 / 6%);
    --button-secondary-hover-border: rgb(9 201 232 / 45%);
    --button-glass-bg: rgb(255 255 255 / 3%);
    --button-glass-hover-bg: rgb(85 216 245 / 6%);
    --button-glass-border: rgb(153 174 220 / 22%);
    --button-light-bg: #eafaff;
    --button-light-color: #071526;
    --button-light-hover-bg: #FFFFFF;
    --button-hover-shadow: 0 7px 26px rgba(8, 124, 240, .28);
    --font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-display: clamp(2rem, 3.5vw, 3rem);
    --font-size-h1: clamp(2rem, 3.5vw, 2.8rem);
    --font-size-h2: clamp(1.5rem, 2.8vw, 2.25rem);
    --font-size-h3: 1.0625rem;
    --font-size-body: 1rem;
    --font-size-body-sm: 0.9rem;
    --font-size-caption: 0.8125rem;
    --font-size-micro: 0.6875rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.45;
    --line-height-normal: 1.8;
    --line-height-relaxed: 2;
    --line-height-heading: 1.65;
    --line-height-body: 1.9;
    --container-width: 1200px;
    --page-gutter: 24px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-16: 64px;
    --section-space: clamp(64px, 8vw, 104px);
    --section-space-mobile: 48px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --control-height-sm: 40px;
    --control-height-md: 48px;
    --control-height-lg: 54px;
    --button-height: 48px;
    --button-padding-inline: 22px;
    --button-radius: var(--radius-pill);
    --button-font-size: var(--font-size-body-sm);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.18);
    --shadow-glow: 0 0 24px rgba(9, 201, 232, 0.12);
    --transition-fast: 180ms ease;
    --transition-normal: 260ms ease;
}
:root[data-theme="light"] {
    color-scheme: light;
    --color-bg: #F5F7FC;
    --color-surface: #FFFFFF;
    --color-surface-light: #E9EEF8;
    --color-primary: #0868D7;
    --color-cyan: #087F9E;
    --color-purple: #7025C9;
    --color-pink: #A91DD8;
    --color-text: #17213A;
    --color-text-muted: #596780;
    --color-border: rgba(35, 52, 85, 0.16);
    --shadow-sm: 0 4px 14px rgba(25, 40, 75, 0.06);
    --shadow-md: 0 12px 32px rgba(25, 40, 75, 0.10);
    --shadow-glow: 0 0 24px rgba(8, 127, 158, 0.08);
}
@media (max-width: 600px) { :root { --page-gutter: 16px; --section-space-mobile: 40px; } }
@media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; } }