/**
 * Base CSS – Tech Professional 2026 Palette
 * متغیرهای پایه، ریست، تایپوگرافی
 * UTF-8 encoded
 */

/* ══════════════════════════════════════════════
   ──  Light Mode (default)
   ══════════════════════════════════════════════ */
:root {
    /* ── Brand ── */
    --brand-dark: #0F172A;
    --brand-light: #1E293B;

    /* ── Primary: آبی الکتریکی – لینک‌ها، آیکون‌ها، هایلایت ── */
    --md-primary: #3B82F6;
    --md-primary-dark: #2563EB;
    --md-primary-light: #60A5FA;
    --md-on-primary: #FFFFFF;
    --md-primary-rgb: 59, 130, 246;

    /* ── Secondary: نارنجی CTA – دکمه‌های اقدام ── */
    --md-secondary: #F97316;
    --md-secondary-dark: #EA580C;
    --md-secondary-light: #FB923C;
    --md-on-secondary: #FFFFFF;
    --md-secondary-rgb: 249, 115, 22;

    /* ── Tertiary: فیروزه‌ای (neon ملایم) ── */
    --md-tertiary: #22D3EE;
    --md-tertiary-dark: #06B6D4;
    --md-tertiary-light: #67E8F9;
    --md-on-tertiary: #FFFFFF;
    --md-tertiary-rgb: 34, 211, 238;

    /* ── Semantic / Status ── */
    --md-error: #EF4444;
    --md-error-dark: #DC2626;
    --md-on-error: #FFFFFF;
    --md-success: #10B981;
    --md-success-dark: #059669;
    --md-on-success: #FFFFFF;
    --md-warning: #F59E0B;
    --md-warning-dark: #D97706;
    --md-on-warning: #FFFFFF;
    --md-info: #3B82F6;
    --md-info-dark: #2563EB;
    --md-on-info: #FFFFFF;

    /* ── Surface / Background ── */
    --md-surface: #FFFFFF;
    --md-on-surface: #0F172A;
    --md-surface-variant: #F8FAFC;
    --md-on-surface-variant: #64748B;
    --md-background: #F8FAFC;
    --md-on-background: #0F172A;
    --md-outline: #E2E8F0;
    --md-outline-variant: #CBD5E1;

    /* ── Legacy aliases ── */
    --primary-color: var(--md-primary);
    --primary-dark: var(--md-primary-dark);
    --primary-light: var(--md-primary-light);
    --secondary-color: var(--md-secondary);
    --accent-color: var(--md-tertiary);
    --success-color: var(--md-success);
    --error-color: var(--md-error);
    --warning-color: var(--md-warning);
    --text-color: var(--md-on-surface);
    --text-light: var(--md-on-surface-variant);
    --bg-color: var(--md-background);
    --bg-light: var(--md-surface);
    --white: var(--md-surface);

    /* ── Gradients (تک‌رنگ — هماهنگ با پالت؛ JS نیز بازنویسی می‌کند) ── */
    --gradient-brand: var(--brand-dark);
    --gradient-primary: var(--md-primary);
    --gradient-cta: var(--md-secondary);
    --gradient-vibrant: var(--md-secondary);
    --gradient-hero: var(--brand-dark);
    --gradient-ocean: var(--md-primary);
    --gradient-dark: var(--brand-dark);
    --gradient-light: rgba(var(--md-secondary-rgb), 0.06);
    --gradient-blue: var(--md-primary);

    /* ── Accent یکپارچه سایت (دکمه CTA، badge، highlight) ── */
    --site-accent: var(--md-secondary);
    --site-accent-dark: var(--md-secondary-dark);
    --site-accent-soft: rgba(var(--md-secondary-rgb), 0.12);
    --site-accent-muted: rgba(var(--md-secondary-rgb), 0.06);

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);

    /* ── Elevation (Material) ── */
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    --md-elevation-3: 0 10px 20px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.08);

    /* ── Glass ── */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* ── Typography ── */
    --base-font-size: 1rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
}

/* ══════════════════════════════════════════════
   ──  Dark Mode
   ══════════════════════════════════════════════ */
[data-theme="dark"],
body.dark-mode {
    --brand-dark: #020617;
    --brand-light: #0F172A;

    --md-primary: #60A5FA;
    --md-primary-dark: #3B82F6;
    --md-primary-light: #93C5FD;
    --md-primary-rgb: 96, 165, 250;

    --md-secondary: #FB923C;
    --md-secondary-dark: #F97316;
    --md-secondary-light: #FDBA74;
    --md-secondary-rgb: 251, 146, 60;

    --md-tertiary: #22D3EE;
    --md-tertiary-dark: #06B6D4;
    --md-tertiary-light: #67E8F9;
    --md-tertiary-rgb: 34, 211, 238;

    --md-surface: #1E293B;
    --md-on-surface: #E2E8F0;
    --md-surface-variant: #334155;
    --md-on-surface-variant: #94A3B8;
    --md-background: #0F172A;
    --md-on-background: #E2E8F0;
    --md-outline: #334155;
    --md-outline-variant: #475569;

    --gradient-brand: var(--brand-dark);
    --gradient-hero: var(--brand-dark);
    --gradient-light: rgba(var(--md-secondary-rgb), 0.06);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 8px 10px rgba(0, 0, 0, 0.3);

    --glass-bg: rgba(30, 41, 59, 0.8);
    --glass-border: rgba(51, 65, 85, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════
   ──  Reset & Base
   ══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--base-font-size, 16px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family, 'Vazirmatn', Tahoma, Arial, sans-serif);
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.7;
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: inherit; }
input, select, textarea, button { font-family: inherit; }

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* 
 * Animations — 
 * توجه: کلاس animate-in توسط JS به المان‌ها اضافه می‌شود.
 * هر المان خاص (product-card, value-card, ...) با opacity:0 شروع می‌کند
 * و در landing.css با .element.animate-in { opacity:1 } نمایش داده می‌شود.
 * اینجا فقط keyframes تعریف می‌شوند.
 */

@keyframes gradientShift {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1.15) rotate(10deg); }
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}