/** * ICSD Theme - Core Theme Variables (Dark/Light Mode) * تغییر تم با data-theme attribute روی */ /* ============================================ THEME VARIABLES - LIGHT MODE (default) ============================================ */ :root, [data-theme="light"] { /* Primary */ --icsd-primary: #2CA180; --icsd-primary-rgb: 44, 161, 128; --icsd-primary-dark: #1E7A5F; --icsd-primary-light: #5DDCB4; --icsd-primary-soft: rgba(44, 161, 128, 0.08); --icsd-primary-border: rgba(44, 161, 128, 0.25); /* Surfaces */ --icsd-bg: #FFFFFF; --icsd-bg-alt: #F9FAFB; --icsd-bg-elev: #FFFFFF; --icsd-surface: #FFFFFF; --icsd-surface-2: #F3F4F6; /* Borders */ --icsd-border: rgba(0, 0, 0, 0.08); --icsd-border-strong: rgba(0, 0, 0, 0.15); /* Text */ --icsd-text: #0A0E17; --icsd-text-2: #374151; --icsd-text-muted: #6B7280; --icsd-text-on-primary: #FFFFFF; /* Code editor */ --icsd-code-bg: #0D1220; --icsd-code-header-bg: #060912; --icsd-code-text: #E5E7EB; --icsd-code-muted: #6B7280; /* Shadows */ --icsd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --icsd-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); --icsd-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08); --icsd-glow: 0 0 40px rgba(44, 161, 128, 0.12); /* Grid pattern */ --icsd-grid-color: rgba(44, 161, 128, 0.05); /* Terminal dots */ --icsd-dot-red: #FF5F57; --icsd-dot-yellow: #FEBC2E; --icsd-dot-green: #28C840; } /* ============================================ THEME VARIABLES - DARK MODE ============================================ */ [data-theme="dark"] { /* Primary - همون سبز ولی با تطابق تیره */ --icsd-primary: #2CA180; --icsd-primary-rgb: 44, 161, 128; --icsd-primary-dark: #1E7A5F; --icsd-primary-light: #5DDCB4; --icsd-primary-soft: rgba(44, 161, 128, 0.1); --icsd-primary-border: rgba(44, 161, 128, 0.3); /* Surfaces */ --icsd-bg: #0A0E17; --icsd-bg-alt: #0D1220; --icsd-bg-elev: #0D1220; --icsd-surface: #111827; --icsd-surface-2: #1F2937; /* Borders */ --icsd-border: rgba(255, 255, 255, 0.08); --icsd-border-strong: rgba(255, 255, 255, 0.15); /* Text */ --icsd-text: #F3F4F6; --icsd-text-2: #D1D5DB; --icsd-text-muted: #9CA3AF; --icsd-text-on-primary: #0A0E17; /* Code editor - تیره‌تر */ --icsd-code-bg: #060912; --icsd-code-header-bg: #030408; --icsd-code-text: #E5E7EB; --icsd-code-muted: #6B7280; /* Shadows */ --icsd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --icsd-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); --icsd-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4); --icsd-glow: 0 0 40px rgba(44, 161, 128, 0.15); /* Grid pattern */ --icsd-grid-color: rgba(44, 161, 128, 0.06); /* Terminal dots (ثابت) */ --icsd-dot-red: #FF5F57; --icsd-dot-yellow: #FEBC2E; --icsd-dot-green: #28C840; } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; transition: background-color 0.4s ease, color 0.4s ease; } body { font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif; direction: rtl; text-align: right; background-color: var(--icsd-bg); color: var(--icsd-text); line-height: 1.75; margin: 0; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } /* Mono font for code-like elements - Vazirmatn برای اعداد فارسی، JetBrains Mono برای لاتین */ .icsd-mono, .icsd-code, code, pre, kbd { font-family: 'JetBrains Mono', 'Vazirmatn', 'Courier New', monospace; direction: ltr; text-align: left; unicode-bidi: embed; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--icsd-bg-alt); } ::-webkit-scrollbar-thumb { background: var(--icsd-border-strong); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--icsd-primary); } /* Selection */ ::selection { background: var(--icsd-primary); color: var(--icsd-text-on-primary); } /* Links */ a { color: var(--icsd-primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--icsd-primary-dark); } /* Typography */ h1, h2, h3, h4, h5, h6 { color: var(--icsd-text); font-weight: 700; line-height: 1.3; margin: 0 0 0.75em; } p { margin: 0 0 1em; } img { max-width: 100%; height: auto; display: block; } /* Form elements */ input, textarea, select, button { font-family: inherit; font-size: inherit; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], textarea, select { width: 100%; padding: 12px 16px; background: var(--icsd-surface); border: 1px solid var(--icsd-border-strong); border-radius: 10px; color: var(--icsd-text); transition: all 0.2s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--icsd-primary); box-shadow: 0 0 0 3px var(--icsd-primary-soft); } /* کلاس‌های کمکی */ .icsd-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .icsd-text-gradient { background: linear-gradient(120deg, var(--icsd-primary), var(--icsd-primary-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .icsd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }