@kashi-ui/css 0.0.0-stage → 0.3.0

package/dist/kashi.css

@@ -0,0 +1,1227 @@
+@layer kashi.tokens, kashi.base, kashi.components;
+
+/* فونت وزیرمتن (Variable، وزن ۱۰۰ تا ۹۰۰) — لایسنس OFL */
+@font-face {
+  font-family: "Vazirmatn";
+  src: url("./fonts/Vazirmatn.woff2") format("woff2-variations"),
+       url("./fonts/Vazirmatn.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@layer kashi.tokens {
+/* @kashi-ui/tokens — این فایل خودکار ساخته شده است */
+:root {
+  --k-radius-factor: 1;
+  --k-density: 1;
+  --k-firoozeh-50: #e6fbf8;
+  --k-firoozeh-100: #c2f4ee;
+  --k-firoozeh-200: #8ce9df;
+  --k-firoozeh-300: #4fd8cb;
+  --k-firoozeh-400: #22c2b4;
+  --k-firoozeh-500: #0fa89b;
+  --k-firoozeh-600: #08877e;
+  --k-firoozeh-700: #0a6b65;
+  --k-firoozeh-800: #0d5551;
+  --k-firoozeh-900: #0f4644;
+  --k-firoozeh-950: #042a29;
+  --k-lajvard-50: #eef3ff;
+  --k-lajvard-100: #dbe5ff;
+  --k-lajvard-200: #bfd0ff;
+  --k-lajvard-300: #93b0ff;
+  --k-lajvard-400: #6185fd;
+  --k-lajvard-500: #3d5ef8;
+  --k-lajvard-600: #2740ed;
+  --k-lajvard-700: #1f30d9;
+  --k-lajvard-800: #2029b0;
+  --k-lajvard-900: #20298b;
+  --k-lajvard-950: #181b54;
+  --k-zafaran-50: #fff8eb;
+  --k-zafaran-100: #ffecc6;
+  --k-zafaran-200: #ffd788;
+  --k-zafaran-300: #ffbd4a;
+  --k-zafaran-400: #ffa520;
+  --k-zafaran-500: #f98307;
+  --k-zafaran-600: #dd5e02;
+  --k-zafaran-700: #b73e06;
+  --k-zafaran-800: #94300c;
+  --k-zafaran-900: #7a280d;
+  --k-zafaran-950: #461202;
+  --k-anar-50: #fff1f2;
+  --k-anar-100: #ffe0e2;
+  --k-anar-200: #ffc7cb;
+  --k-anar-300: #ffa0a6;
+  --k-anar-400: #ff6972;
+  --k-anar-500: #f83b47;
+  --k-anar-600: #e51d2a;
+  --k-anar-700: #c11420;
+  --k-anar-800: #a0141e;
+  --k-anar-900: #841820;
+  --k-anar-950: #48070b;
+  --k-pesteh-50: #f3faeb;
+  --k-pesteh-100: #e4f4d3;
+  --k-pesteh-200: #cbeaac;
+  --k-pesteh-300: #a9db7b;
+  --k-pesteh-400: #89c951;
+  --k-pesteh-500: #6aae33;
+  --k-pesteh-600: #518b25;
+  --k-pesteh-700: #3f6a21;
+  --k-pesteh-800: #35551f;
+  --k-pesteh-900: #2e491e;
+  --k-pesteh-950: #15270c;
+  --k-shab-0: #ffffff;
+  --k-shab-50: #f6f7f9;
+  --k-shab-100: #eceef2;
+  --k-shab-200: #d5d9e2;
+  --k-shab-300: #b1b9c9;
+  --k-shab-400: #8792ab;
+  --k-shab-500: #687491;
+  --k-shab-600: #535d78;
+  --k-shab-700: #444c62;
+  --k-shab-800: #2a2f3d;
+  --k-shab-850: #1e222c;
+  --k-shab-900: #161921;
+  --k-shab-950: #0d0f14;
+  --k-shab-1000: #08090c;
+  --k-brand-50: var(--k-firoozeh-50);
+  --k-brand-100: var(--k-firoozeh-100);
+  --k-brand-200: var(--k-firoozeh-200);
+  --k-brand-300: var(--k-firoozeh-300);
+  --k-brand-400: var(--k-firoozeh-400);
+  --k-brand-500: var(--k-firoozeh-500);
+  --k-brand-600: var(--k-firoozeh-600);
+  --k-brand-700: var(--k-firoozeh-700);
+  --k-brand-800: var(--k-firoozeh-800);
+  --k-brand-900: var(--k-firoozeh-900);
+  --k-brand-950: var(--k-firoozeh-950);
+  --k-space-0: 0;
+  --k-space-1: 0.25rem;
+  --k-space-2: 0.5rem;
+  --k-space-3: 0.75rem;
+  --k-space-4: 1rem;
+  --k-space-5: 1.25rem;
+  --k-space-6: 1.5rem;
+  --k-space-8: 2rem;
+  --k-space-10: 2.5rem;
+  --k-space-12: 3rem;
+  --k-space-16: 4rem;
+  --k-space-20: 5rem;
+  --k-space-24: 6rem;
+  --k-space-px: 1px;
+  --k-space-0_5: 0.125rem;
+  --k-space-1_5: 0.375rem;
+  --k-radius-none: 0;
+  --k-radius-sm: calc(0.25rem * var(--k-radius-factor));
+  --k-radius-md: calc(0.5rem * var(--k-radius-factor));
+  --k-radius-lg: calc(0.75rem * var(--k-radius-factor));
+  --k-radius-xl: calc(1rem * var(--k-radius-factor));
+  --k-radius-2xl: calc(1.5rem * var(--k-radius-factor));
+  --k-radius-full: 9999px;
+  --k-font-sans: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
+  --k-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Vazirmatn", monospace;
+  --k-text-xs: 0.75rem;
+  --k-text-sm: 0.875rem;
+  --k-text-md: 0.9375rem;
+  --k-text-lg: 1.0625rem;
+  --k-text-xl: 1.25rem;
+  --k-text-2xl: 1.5rem;
+  --k-text-3xl: 1.875rem;
+  --k-text-4xl: 2.25rem;
+  --k-text-5xl: 3rem;
+  --k-text-6xl: 3.75rem;
+  --k-weight-light: 300;
+  --k-weight-regular: 400;
+  --k-weight-medium: 500;
+  --k-weight-semibold: 600;
+  --k-weight-bold: 700;
+  --k-weight-black: 900;
+  --k-leading-tight: 1.35;
+  --k-leading-normal: 1.75;
+  --k-leading-relaxed: 2;
+  --k-shadow-xs: 0 1px 2px rgb(10 13 18 / 0.05);
+  --k-shadow-sm: 0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1);
+  --k-shadow-md: 0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06);
+  --k-shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
+  --k-shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03);
+  --k-shadow-2xl: 0 24px 48px -12px rgb(10 13 18 / 0.18);
+  --k-duration-fast: 120ms;
+  --k-duration-normal: 200ms;
+  --k-duration-slow: 320ms;
+  --k-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --k-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.3);
+  --k-z-dropdown: 1000;
+  --k-z-sticky: 1100;
+  --k-z-overlay: 1300;
+  --k-z-modal: 1400;
+  --k-z-toast: 1500;
+}
+
+:root, [data-theme="dark"] {
+  color-scheme: dark;
+  --k-bg-primary: var(--k-shab-1000);
+  --k-bg-secondary: var(--k-shab-950);
+  --k-bg-tertiary: var(--k-shab-900);
+  --k-bg-elevated: var(--k-shab-900);
+  --k-bg-hover: rgb(255 255 255 / 0.05);
+  --k-bg-active: rgb(255 255 255 / 0.08);
+  --k-bg-brand: var(--k-brand-700);
+  --k-bg-brand-hover: var(--k-brand-800);
+  --k-bg-brand-subtle: color-mix(in srgb, var(--k-brand-500) 14%, transparent);
+  --k-bg-error: var(--k-anar-600);
+  --k-bg-error-hover: var(--k-anar-700);
+  --k-bg-error-subtle: rgb(248 59 71 / 0.14);
+  --k-bg-warning-subtle: rgb(249 131 7 / 0.14);
+  --k-bg-success-subtle: rgb(106 174 51 / 0.14);
+  --k-bg-info-subtle: rgb(61 94 248 / 0.16);
+  --k-text-primary: var(--k-shab-50);
+  --k-text-secondary: var(--k-shab-200);
+  --k-text-tertiary: var(--k-shab-400);
+  --k-text-quaternary: var(--k-shab-500);
+  --k-text-on-brand: var(--k-shab-0);
+  --k-text-brand: var(--k-brand-300);
+  --k-text-error: var(--k-anar-400);
+  --k-text-warning: var(--k-zafaran-400);
+  --k-text-success: var(--k-pesteh-400);
+  --k-text-info: var(--k-lajvard-300);
+  --k-border-primary: var(--k-shab-700);
+  --k-border-secondary: var(--k-shab-800);
+  --k-border-brand: var(--k-brand-400);
+  --k-border-input: var(--k-shab-500);
+  --k-border-error: var(--k-anar-400);
+  --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent);
+  --k-ring-error: 0 0 0 4px rgb(248 59 71 / 0.28);
+  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(12 14 18 / 0.18), inset 0 -2px 0 rgb(12 14 18 / 0.05);
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+  --k-bg-primary: var(--k-shab-0);
+  --k-bg-secondary: var(--k-shab-50);
+  --k-bg-tertiary: var(--k-shab-100);
+  --k-bg-elevated: var(--k-shab-0);
+  --k-bg-hover: var(--k-shab-50);
+  --k-bg-active: var(--k-shab-100);
+  --k-bg-brand: var(--k-brand-700);
+  --k-bg-brand-hover: var(--k-brand-800);
+  --k-bg-brand-subtle: var(--k-brand-50);
+  --k-bg-error: var(--k-anar-600);
+  --k-bg-error-hover: var(--k-anar-700);
+  --k-bg-error-subtle: var(--k-anar-50);
+  --k-bg-warning-subtle: var(--k-zafaran-50);
+  --k-bg-success-subtle: var(--k-pesteh-50);
+  --k-bg-info-subtle: var(--k-lajvard-50);
+  --k-text-primary: var(--k-shab-950);
+  --k-text-secondary: var(--k-shab-700);
+  --k-text-tertiary: var(--k-shab-600);
+  --k-text-quaternary: var(--k-shab-500);
+  --k-text-on-brand: var(--k-shab-0);
+  --k-text-brand: var(--k-brand-700);
+  --k-text-error: var(--k-anar-700);
+  --k-text-warning: var(--k-zafaran-700);
+  --k-text-success: var(--k-pesteh-700);
+  --k-text-info: var(--k-lajvard-700);
+  --k-border-primary: var(--k-shab-300);
+  --k-border-secondary: var(--k-shab-200);
+  --k-border-brand: var(--k-brand-600);
+  --k-border-input: var(--k-shab-500);
+  --k-border-error: var(--k-anar-500);
+  --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent);
+  --k-ring-error: 0 0 0 4px rgb(229 29 42 / 0.2);
+  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05);
+}
+
+}
+
+@layer kashi.base {
+/* پایه — فقط در ریشه یا داخل .k-root اعمال می‌شود */
+*, *::before, *::after { box-sizing: border-box; }
+
+:where(html) {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+:where(body, .k-root) {
+  margin: 0;
+  background: var(--k-bg-primary);
+  color: var(--k-text-primary);
+  font-family: var(--k-font-sans);
+  font-size: var(--k-text-md);
+  line-height: var(--k-leading-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* کشیده‌نویسی و اتصال درست حروف فارسی */
+  font-feature-settings: "kern", "liga", "calt";
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  line-height: var(--k-leading-tight);
+  font-weight: var(--k-weight-bold);
+}
+
+:where(:focus-visible) {
+  outline: 2px solid var(--k-border-brand);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--k-bg-brand-subtle);
+  color: var(--k-text-primary);
+}
+
+/* فقط برای صفحه‌خوان قابل‌خواندن است */
+.k-sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* لینک «رفتن به محتوای اصلی» برای کاربران کیبورد */
+.k-skip-link {
+  position: absolute;
+  inset-inline-start: var(--k-space-4);
+  inset-block-start: var(--k-space-4);
+  z-index: var(--k-z-toast);
+  padding: var(--k-space-2) var(--k-space-4);
+  border-radius: var(--k-radius-md);
+  background: var(--k-bg-brand);
+  color: var(--k-text-on-brand);
+  translate: 0 -200%;
+}
+.k-skip-link:focus { translate: 0 0; }
+
+/* کاربرانی که کنتراست بیشتر خواسته‌اند */
+@media (prefers-contrast: more) {
+  :root {
+    --k-text-tertiary: var(--k-text-secondary);
+    --k-border-primary: var(--k-text-tertiary);
+    --k-border-secondary: var(--k-border-primary);
+  }
+}
+
+/* ارقام لاتین در کنار متن فارسی: tabular برای جدول‌ها و اعداد */
+.k-tabular { font-variant-numeric: tabular-nums; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+}
+
+@layer kashi.components {
+/* هشدار (Alert) — به سبک Untitled UI: سطح خنثی، رنگ فقط در آیکون شاخص
+ * <div class="k-alert k-alert--warning" role="alert">  ← role="status" برای پیام‌های غیرفوری
+ *   <span class="k-alert__icon" aria-hidden="true"><svg>…</svg></span>
+ *   <div class="k-alert__content">
+ *     <p class="k-alert__title">عنوان</p>
+ *     <p class="k-alert__description">توضیح</p>
+ *     <div class="k-alert__actions">…</div>
+ *   </div>
+ *   <button class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-alert__close" aria-label="بستن">×</button>
+ * </div>
+ * رنگ‌ها: neutral | brand | info | success | warning | error
+ * k-alert--tinted: پس‌زمینهٔ رنگی کم‌رنگ به‌جای سطح خنثی
+ *
+ * متغیرها: --k-alert-radius  --k-alert-padding  --k-alert-bg
+ */
+.k-alert {
+  --_accent: var(--k-text-tertiary);
+  --_bg: var(--k-alert-bg, var(--k-bg-secondary));
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--k-space-4);
+  padding: var(--k-alert-padding, calc(1rem * var(--k-density)));
+  border: 1px solid var(--k-border-primary);
+  border-radius: var(--k-alert-radius, var(--k-radius-xl));
+  background: var(--_bg);
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+  box-shadow: var(--k-shadow-xs);
+}
+
+.k-alert--brand { --_accent: var(--k-text-brand); }
+.k-alert--info { --_accent: var(--k-text-info); }
+.k-alert--success { --_accent: var(--k-text-success); }
+.k-alert--warning { --_accent: var(--k-text-warning); }
+.k-alert--error { --_accent: var(--k-text-error); }
+
+.k-alert--tinted {
+  --_bg: var(--k-alert-bg, color-mix(in srgb, var(--_accent) 8%, var(--k-bg-primary)));
+  border-color: color-mix(in srgb, var(--_accent) 32%, transparent);
+}
+
+/* آیکون شاخص با دو حلقهٔ هم‌مرکز (featured icon) */
+.k-alert__icon {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin: 0.375rem;
+  color: var(--_accent);
+}
+.k-alert__icon::before,
+.k-alert__icon::after {
+  content: "";
+  position: absolute;
+  border: 2px solid var(--_accent);
+  border-radius: var(--k-radius-full);
+}
+.k-alert__icon::before { inset: -0.3125rem; opacity: 0.3; }
+.k-alert__icon::after { inset: -0.625rem; opacity: 0.1; }
+.k-alert__icon svg { inline-size: 100%; block-size: 100%; }
+
+.k-alert__content {
+  flex: 1;
+  display: grid;
+  gap: var(--k-space-1);
+  min-inline-size: 0;
+  padding-block-start: 0.125rem;
+}
+
+.k-alert__title {
+  margin: 0;
+  color: var(--k-text-secondary);
+  font-weight: var(--k-weight-semibold);
+}
+
+.k-alert__description { margin: 0; }
+
+.k-alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--k-space-3);
+  margin-block-start: var(--k-space-2);
+}
+
+.k-alert__close { margin-block: -0.375rem; margin-inline-end: -0.375rem; }
+
+@media (forced-colors: active) {
+  .k-alert { border-color: CanvasText; }
+}
+
+/* آواتار
+ * <span class="k-avatar k-avatar--lg">
+ *   <img class="k-avatar__image" src="…" alt="سارا احمدی">   ← یا حروف اول: <span aria-hidden="true">س‌ا</span> + role="img" aria-label روی والد
+ *   <span class="k-avatar__status k-avatar__status--online"></span>
+ * </span>
+ * اندازه‌ها: xs | sm | md | lg | xl | 2xl — شکل: k-avatar--square — رنگ: k-avatar--brand
+ * گروه: <div class="k-avatar-group">…</div>
+ *
+ * متغیرها: --k-avatar-size  --k-avatar-radius  --k-avatar-bg  --k-avatar-fg
+ */
+.k-avatar {
+  --_s: var(--k-avatar-size, 2.5rem);
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_s);
+  block-size: var(--_s);
+  border-radius: var(--k-avatar-radius, var(--k-radius-full));
+  background: var(--k-avatar-bg, var(--k-bg-tertiary));
+  color: var(--k-avatar-fg, var(--k-text-secondary));
+  font-size: calc(var(--_s) * 0.36);
+  font-weight: var(--k-weight-semibold);
+  line-height: 1;
+  user-select: none;
+  /* حاشیهٔ داخلی ظریف مثل Untitled UI */
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-text-primary) 8%, transparent);
+}
+
+.k-avatar__image {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.k-avatar--xs { --_s: var(--k-avatar-size, 1.5rem); }
+.k-avatar--sm { --_s: var(--k-avatar-size, 2rem); }
+.k-avatar--lg { --_s: var(--k-avatar-size, 3rem); }
+.k-avatar--xl { --_s: var(--k-avatar-size, 3.5rem); }
+.k-avatar--2xl { --_s: var(--k-avatar-size, 4rem); }
+
+.k-avatar--square { border-radius: var(--k-avatar-radius, var(--k-radius-md)); }
+.k-avatar--brand {
+  background: var(--k-avatar-bg, var(--k-bg-brand-subtle));
+  color: var(--k-avatar-fg, var(--k-text-brand));
+}
+
+.k-avatar__status {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  inline-size: max(0.5rem, calc(var(--_s) * 0.28));
+  block-size: max(0.5rem, calc(var(--_s) * 0.28));
+  border: 2px solid var(--k-bg-primary);
+  border-radius: var(--k-radius-full);
+  background: var(--k-border-input);
+}
+.k-avatar__status--online { background: var(--k-text-success); }
+.k-avatar__status--busy { background: var(--k-text-error); }
+.k-avatar__status--away { background: var(--k-text-warning); }
+
+.k-avatar-group { display: inline-flex; align-items: center; }
+.k-avatar-group > .k-avatar {
+  box-shadow: 0 0 0 2px var(--k-bg-primary);
+}
+.k-avatar-group > .k-avatar + .k-avatar {
+  margin-inline-start: calc(var(--_s) * -0.28);
+}
+
+@media (forced-colors: active) {
+  .k-avatar { border: 1px solid CanvasText; }
+  .k-avatar__status { background: CanvasText; }
+}
+
+/* نشان (Badge)
+ * <span class="k-badge k-badge--success"><span class="k-badge__dot" aria-hidden="true"></span>فعال</span>
+ * رنگ‌ها: neutral | brand | error | warning | success | info — اندازه‌ها: sm | md | lg
+ * شکل: پیش‌فرض گرد (pill)؛ k-badge--square برای گوشهٔ کم
+ *
+ * متغیرها: --k-badge-radius  --k-badge-font-weight
+ */
+.k-badge {
+  --_bg: var(--k-bg-tertiary);
+  --_fg: var(--k-text-secondary);
+  --_px: 0.625rem;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--k-space-1);
+  padding-block: 0.125rem;
+  padding-inline: var(--_px);
+  border: 1px solid color-mix(in srgb, var(--_fg) 24%, transparent);
+  border-radius: var(--k-badge-radius, var(--k-radius-full));
+  background: var(--_bg);
+  color: var(--_fg);
+  font-size: var(--k-text-sm);
+  font-weight: var(--k-badge-font-weight, var(--k-weight-medium));
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.k-badge--brand { --_bg: var(--k-bg-brand-subtle); --_fg: var(--k-text-brand); }
+.k-badge--error { --_bg: var(--k-bg-error-subtle); --_fg: var(--k-text-error); }
+.k-badge--warning { --_bg: var(--k-bg-warning-subtle); --_fg: var(--k-text-warning); }
+.k-badge--success { --_bg: var(--k-bg-success-subtle); --_fg: var(--k-text-success); }
+.k-badge--info { --_bg: var(--k-bg-info-subtle); --_fg: var(--k-text-info); }
+
+.k-badge--sm { --_px: 0.5rem; font-size: var(--k-text-xs); }
+.k-badge--lg { --_px: 0.75rem; padding-block: 0.25rem; }
+.k-badge--square { border-radius: var(--k-badge-radius, var(--k-radius-sm)); }
+
+.k-badge__dot {
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  border-radius: var(--k-radius-full);
+  background: currentColor;
+}
+.k-badge svg { inline-size: 0.875em; block-size: 0.875em; }
+
+@media (forced-colors: active) {
+  .k-badge { border-color: CanvasText; }
+}
+
+/* دکمه — به سبک Untitled UI: سایهٔ اسکئومورفیک و حلقهٔ فوکوس نرم
+ * <button class="k-btn k-btn--primary k-btn--md">ثبت</button>
+ * گونه‌ها: primary | secondary | tertiary | link | danger | danger-secondary
+ * اندازه‌ها: sm | md | lg | xl — حالت‌ها: disabled، aria-disabled، aria-busy="true"
+ *
+ * متغیرهای قابل‌بازنویسی (روی :root یا هر والدی):
+ *   --k-btn-height-{sm,md,lg,xl}  --k-btn-padding-{sm,md,lg,xl}
+ *   --k-btn-radius  --k-btn-font-weight  --k-btn-gap
+ */
+.k-btn {
+  --_h: var(--k-btn-height-md, calc(2.5rem * var(--k-density)));
+  --_px: var(--k-btn-padding-md, calc(0.875rem * var(--k-density)));
+  --_fs: var(--k-text-sm);
+  --_bg: var(--k-bg-primary);
+  --_bg-hover: var(--k-bg-hover);
+  --_fg: var(--k-text-secondary);
+  --_fg-hover: var(--k-text-primary);
+  --_border: var(--k-border-primary);
+  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+  --_ring: var(--k-ring-brand);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--k-btn-gap, var(--k-space-1_5));
+  block-size: var(--_h);
+  /* حداقل ناحیهٔ لمس WCAG 2.5.8 */
+  min-block-size: 24px;
+  min-inline-size: 24px;
+  padding-inline: var(--_px);
+  border: 1px solid var(--_border);
+  border-radius: var(--k-btn-radius, var(--k-radius-md));
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: var(--_shadow);
+  font: inherit;
+  font-size: var(--_fs);
+  font-weight: var(--k-btn-font-weight, var(--k-weight-semibold));
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--k-duration-fast) var(--k-ease-standard),
+    color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-btn:hover { background: var(--_bg-hover); color: var(--_fg-hover); }
+
+.k-btn:focus-visible {
+  /* outline شفاف در حالت forced-colors ویندوز قابل‌مشاهده می‌شود */
+  outline: 2px solid transparent;
+  box-shadow: var(--_shadow), var(--_ring);
+}
+
+.k-btn:disabled,
+.k-btn[aria-disabled="true"]:not([aria-busy="true"]) {
+  --_bg: var(--k-bg-secondary);
+  --_fg: var(--k-text-quaternary);
+  --_border: var(--k-border-secondary);
+  --_shadow: var(--k-shadow-xs);
+  cursor: not-allowed;
+}
+.k-btn[aria-disabled="true"]:hover { background: var(--_bg); color: var(--_fg); }
+
+
+/* گونه‌ها */
+.k-btn--primary {
+  --_bg: var(--k-bg-brand);
+  --_bg-hover: var(--k-bg-brand-hover);
+  --_fg: var(--k-text-on-brand);
+  --_fg-hover: var(--k-text-on-brand);
+  --_border: transparent;
+  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+}
+/* حاشیهٔ داخلی سفید که به پایین محو می‌شود (Untitled UI) */
+.k-btn:is(.k-btn--primary, .k-btn--danger)::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border: 1px solid rgb(255 255 255 / 0.12);
+  border-radius: inherit;
+  mask: linear-gradient(to bottom, #000, transparent);
+  pointer-events: none;
+}
+.k-btn:is(.k-btn--primary, .k-btn--danger):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))::before { display: none; }
+.k-btn--tertiary {
+  --_bg: transparent;
+  --_border: transparent;
+  --_shadow: none;
+}
+.k-btn--link {
+  --_bg: transparent;
+  --_bg-hover: transparent;
+  --_fg: var(--k-text-brand);
+  --_fg-hover: var(--k-text-brand);
+  --_border: transparent;
+  --_shadow: none;
+  --_h: auto;
+  --_px: 0;
+}
+.k-btn--link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
+.k-btn--danger {
+  --_bg: var(--k-bg-error);
+  --_bg-hover: var(--k-bg-error-hover);
+  --_fg: var(--k-text-on-brand);
+  --_fg-hover: var(--k-text-on-brand);
+  --_border: transparent;
+  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+  --_ring: var(--k-ring-error);
+}
+.k-btn--danger-secondary {
+  --_fg: var(--k-text-error);
+  --_fg-hover: var(--k-text-error);
+  --_bg-hover: var(--k-bg-error-subtle);
+  --_ring: var(--k-ring-error);
+}
+
+/* اندازه‌ها */
+.k-btn--sm {
+  --_h: var(--k-btn-height-sm, calc(2.25rem * var(--k-density)));
+  --_px: var(--k-btn-padding-sm, calc(0.75rem * var(--k-density)));
+}
+.k-btn--lg {
+  --_h: var(--k-btn-height-lg, calc(2.75rem * var(--k-density)));
+  --_px: var(--k-btn-padding-lg, calc(1.125rem * var(--k-density)));
+  --_fs: var(--k-text-md);
+}
+.k-btn--xl {
+  --_h: var(--k-btn-height-xl, calc(3rem * var(--k-density)));
+  --_px: var(--k-btn-padding-xl, calc(1.25rem * var(--k-density)));
+  --_fs: var(--k-text-md);
+}
+.k-btn--icon { padding-inline: 0; inline-size: var(--_h); }
+.k-btn--block { display: flex; inline-size: 100%; }
+
+.k-btn svg { inline-size: 1.25em; block-size: 1.25em; flex-shrink: 0; }
+
+/* آیکون‌های جهت‌دار (فلش و…) در RTL آینه می‌شوند */
+[dir="rtl"] .k-btn [data-k-mirror] { transform: scaleX(-1); }
+
+/* در حال بارگذاری */
+.k-btn[aria-busy="true"] {
+  color: transparent;
+  cursor: progress;
+}
+.k-btn[aria-busy="true"]::after {
+  content: "";
+  position: absolute;
+  inline-size: 1.1em;
+  block-size: 1.1em;
+  border: 2px solid var(--_fg);
+  border-block-start-color: transparent;
+  border-radius: var(--k-radius-full);
+  animation: k-spin 0.7s linear infinite;
+}
+
+@keyframes k-spin { to { rotate: 360deg; } }
+
+/* حالت کنتراست بالای ویندوز */
+@media (forced-colors: active) {
+  .k-btn { border-color: ButtonText; }
+  .k-btn--primary, .k-btn--danger { border-color: ButtonText; }
+  .k-btn:disabled, .k-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
+  .k-btn[aria-busy="true"]::after { border-color: ButtonText; border-block-start-color: transparent; }
+}
+
+/* تقویم شمسی و انتخاب تاریخ
+ * ساختار را کامپوننت React می‌سازد (Calendar و DatePicker)؛ این استایل برای هر پیاده‌سازی دیگری هم قابل‌استفاده است.
+ *
+ * متغیرها: --k-calendar-day-size  --k-calendar-radius  --k-calendar-bg  --k-datepicker-width
+ */
+.k-calendar {
+  --_day: var(--k-calendar-day-size, calc(2.5rem * var(--k-density)));
+
+  display: grid;
+  gap: var(--k-space-2);
+  inline-size: max-content;
+  max-inline-size: 100%;
+  color: var(--k-text-primary);
+  font-size: var(--k-text-sm);
+}
+
+.k-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--k-space-2);
+}
+
+.k-calendar__selects { display: flex; gap: var(--k-space-1); }
+
+.k-calendar__select {
+  appearance: none;
+  min-block-size: 2.25rem;
+  padding-block: 0;
+  padding-inline: var(--k-space-3) var(--k-space-6);
+  border: 1px solid transparent;
+  border-radius: var(--k-radius-md);
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23687491' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat,
+    transparent;
+  background-position: left var(--k-space-1_5) center;
+  background-size: 1rem;
+  color: var(--k-text-primary);
+  font: inherit;
+  font-weight: var(--k-weight-semibold);
+  cursor: pointer;
+}
+[dir="ltr"] .k-calendar__select { background-position: right var(--k-space-1_5) center; }
+.k-calendar__select:hover { background-color: var(--k-bg-hover); }
+.k-calendar__select:focus-visible { outline: 2px solid transparent; border-color: var(--k-border-brand); box-shadow: var(--k-ring-brand); }
+.k-calendar__select option { background: var(--k-bg-elevated); color: var(--k-text-primary); }
+
+.k-calendar__grid { border-collapse: collapse; margin-inline: auto; }
+.k-calendar__grid th {
+  block-size: 2rem;
+  padding: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-xs);
+  font-weight: var(--k-weight-medium);
+  text-align: center;
+}
+.k-calendar__grid td { padding: 1px; text-align: center; }
+
+.k-calendar__day {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--_day);
+  block-size: var(--_day);
+  padding: 0;
+  border: 0;
+  border-radius: var(--k-calendar-radius, var(--k-radius-full));
+  background: transparent;
+  color: var(--k-text-secondary);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
+}
+.k-calendar__day:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
+.k-calendar__day:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
+
+/* امروز: نقطهٔ زیر عدد */
+.k-calendar__day[aria-current="date"] { color: var(--k-text-brand); font-weight: var(--k-weight-bold); }
+.k-calendar__day[aria-current="date"]::after {
+  content: "";
+  position: absolute;
+  inset-block-end: 0.3rem;
+  inline-size: 0.25rem;
+  block-size: 0.25rem;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+[aria-selected="true"] > .k-calendar__day {
+  background: var(--k-bg-brand);
+  color: var(--k-text-on-brand);
+  font-weight: var(--k-weight-semibold);
+  box-shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+}
+[aria-selected="true"] > .k-calendar__day:focus-visible { box-shadow: var(--k-ring-brand); }
+
+.k-calendar__day[aria-disabled="true"] {
+  color: var(--k-text-quaternary);
+  text-decoration: line-through;
+  cursor: not-allowed;
+}
+.k-calendar__day[aria-disabled="true"]:hover { background: transparent; }
+
+.k-calendar__footer {
+  display: flex;
+  justify-content: center;
+  padding-block-start: var(--k-space-2);
+  border-block-start: 1px solid var(--k-border-secondary);
+}
+
+/* انتخاب تاریخ: فیلد + تقویم شناور */
+.k-datepicker { position: relative; }
+.k-datepicker .k-input { padding-inline-end: var(--k-space-1); }
+.k-datepicker__toggle { margin-block: -0.25rem; }
+
+.k-datepicker__popover {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: var(--k-z-dropdown);
+  inline-size: var(--k-datepicker-width, max-content);
+  max-inline-size: calc(100vw - 2rem);
+  padding: var(--k-space-4);
+  border: 1px solid var(--k-border-secondary);
+  border-radius: var(--k-radius-xl);
+  background: var(--k-calendar-bg, var(--k-bg-elevated));
+  box-shadow: var(--k-shadow-xl);
+  animation: k-pop-in var(--k-duration-fast) var(--k-ease-standard);
+}
+@keyframes k-pop-in { from { opacity: 0; translate: 0 -4px; } }
+
+/* متن کوچک داخل فیلد، مثل نام بانک */
+.k-input__meta {
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  [aria-selected="true"] > .k-calendar__day { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+  .k-calendar__day[aria-current="date"] { outline: 1px solid CanvasText; }
+  .k-datepicker__popover { border-color: CanvasText; }
+}
+
+/* کارت
+ * <article class="k-card">
+ *   <header class="k-card__header">
+ *     <h3 class="k-card__title">عنوان</h3>
+ *     <p class="k-card__description">توضیح</p>
+ *   </header>
+ *   <div class="k-card__body">...</div>
+ *   <footer class="k-card__footer">...دکمه‌ها</footer>
+ * </article>
+ * گونه‌ها: k-card--flat (بدون سایه) | k-card--interactive (برای کارت قابل‌کلیک، همراه با <a> یا <button>)
+ *
+ * متغیرها: --k-card-padding  --k-card-radius  --k-card-bg  --k-card-border  --k-card-shadow
+ */
+.k-card {
+  --_p: var(--k-card-padding, calc(1.5rem * var(--k-density)));
+
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--k-card-border, var(--k-border-secondary));
+  border-radius: var(--k-card-radius, var(--k-radius-xl));
+  background: var(--k-card-bg, var(--k-bg-elevated));
+  color: var(--k-text-primary);
+  box-shadow: var(--k-card-shadow, var(--k-shadow-xs));
+  overflow: clip;
+}
+
+.k-card__header,
+.k-card__body,
+.k-card__footer { padding: var(--_p); }
+
+.k-card__header + .k-card__body { padding-block-start: 0; }
+
+.k-card__header { display: grid; gap: var(--k-space-1); }
+
+.k-card__title {
+  margin: 0;
+  font-size: var(--k-text-lg);
+  font-weight: var(--k-weight-semibold);
+  line-height: var(--k-leading-tight);
+}
+
+.k-card__description {
+  margin: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+}
+
+.k-card__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--k-space-3);
+  justify-content: flex-end;
+  padding-block: calc(var(--_p) * 0.66);
+  border-block-start: 1px solid var(--k-border-secondary);
+  margin-block-start: auto;
+}
+
+.k-card__media { display: block; inline-size: 100%; object-fit: cover; }
+
+.k-card--flat { box-shadow: none; }
+
+.k-card--interactive {
+  position: relative;
+  transition:
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-normal) var(--k-ease-standard);
+}
+.k-card--interactive:hover { border-color: var(--k-border-primary); box-shadow: var(--k-shadow-md); }
+.k-card--interactive:has(:focus-visible) { box-shadow: var(--k-shadow-md), var(--k-ring-brand); }
+/* لینک اصلی کل کارت را قابل‌کلیک می‌کند ولی فقط یک توقف Tab دارد */
+.k-card--interactive :is(a, button).k-card__link::after { content: ""; position: absolute; inset: 0; }
+.k-card--interactive .k-card__link:focus-visible { outline: none; }
+
+@media (forced-colors: active) {
+  .k-card { border-color: CanvasText; }
+  .k-card--interactive:has(:focus-visible) { outline: 2px solid Highlight; }
+}
+
+/* چک‌باکس — روی <input type="checkbox"> بومی، پس کیبورد و صفحه‌خوان خودکار کار می‌کنند
+ * <label class="k-check">
+ *   <input type="checkbox" class="k-checkbox">
+ *   <span class="k-check__text">
+ *     <span class="k-check__label">مرا به خاطر بسپار</span>
+ *     <span class="k-check__description">توضیح اختیاری</span>
+ *   </span>
+ * </label>
+ * حالت نیمه: input.indeterminate = true — خطا: aria-invalid="true" — اندازه: k-checkbox--lg
+ *
+ * متغیرها: --k-checkbox-size  --k-checkbox-radius
+ */
+.k-checkbox {
+  --_s: var(--k-checkbox-size, 1.125rem);
+  --_border: var(--k-border-input);
+
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_s);
+  block-size: var(--_s);
+  margin: 0;
+  border: 1px solid var(--_border);
+  border-radius: var(--k-checkbox-radius, calc(0.3125rem * var(--k-radius-factor)));
+  background: var(--k-bg-primary);
+  color: var(--k-text-on-brand);
+  cursor: pointer;
+  transition:
+    background-color var(--k-duration-fast) var(--k-ease-standard),
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-checkbox::before {
+  content: "";
+  inline-size: calc(var(--_s) * 0.7);
+  block-size: calc(var(--_s) * 0.7);
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5 5.5 10 2.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
+  scale: 0;
+  transition: scale var(--k-duration-fast) var(--k-ease-emphasized);
+}
+.k-checkbox:indeterminate::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
+}
+
+.k-checkbox:hover { --_border: var(--k-border-brand); }
+
+.k-checkbox:is(:checked, :indeterminate) {
+  --_border: var(--k-bg-brand);
+  background: var(--k-bg-brand);
+}
+.k-checkbox:is(:checked, :indeterminate)::before { scale: 1; }
+
+.k-checkbox:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--k-ring-brand);
+}
+
+.k-checkbox[aria-invalid="true"] { --_border: var(--k-border-error); }
+.k-checkbox[aria-invalid="true"]:focus-visible { box-shadow: var(--k-ring-error); }
+
+.k-checkbox:disabled {
+  --_border: var(--k-border-secondary);
+  background: var(--k-bg-tertiary);
+  color: var(--k-text-quaternary);
+  cursor: not-allowed;
+}
+
+.k-checkbox--lg { --_s: var(--k-checkbox-size, 1.25rem); }
+
+/* ردیف برچسب — مشترک بین چک‌باکس و سوییچ */
+.k-check {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--k-space-2);
+  cursor: pointer;
+  /* ارتفاع خط متن با کنترل هم‌تراز شود */
+  line-height: 1.25rem;
+}
+.k-check > :is(.k-checkbox, .k-switch) { margin-block-start: calc((1.25rem - var(--_h, var(--_s))) / 2); }
+.k-check:has(:disabled) { cursor: not-allowed; }
+.k-check__text { display: grid; gap: 0.125rem; }
+.k-check__label { color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); }
+.k-check__description { color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
+.k-check:has(:disabled) .k-check__label { color: var(--k-text-quaternary); }
+
+/* حالت کنتراست بالای ویندوز: برگشت به کنترل بومی سیستم */
+@media (forced-colors: active) {
+  .k-checkbox { appearance: auto; }
+  .k-checkbox::before { display: none; }
+}
+
+/* فیلد: برچسب + کنترل + راهنما/خطا — مشترک بین Input، Checkbox و Switch
+ * <div class="k-field">
+ *   <label class="k-label" for="email">ایمیل <span class="k-label__required" aria-hidden="true">*</span></label>
+ *   ...کنترل...
+ *   <p class="k-hint" id="email-hint">راهنما</p>
+ *   <p class="k-hint k-hint--error" id="email-error">خطا</p>
+ * </div>
+ */
+.k-field {
+  display: grid;
+  gap: var(--k-field-gap, var(--k-space-1_5));
+  min-inline-size: 0;
+}
+
+.k-label {
+  color: var(--k-text-secondary);
+  font-size: var(--k-text-sm);
+  font-weight: var(--k-weight-medium);
+  line-height: var(--k-leading-tight);
+}
+.k-label__required { color: var(--k-text-error); margin-inline-start: 0.125em; }
+
+.k-hint {
+  margin: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+  line-height: var(--k-leading-tight);
+}
+.k-hint--error { color: var(--k-text-error); }
+
+/* ورودی متن
+ * <div class="k-input">
+ *   <span class="k-input__addon">svg یا متن</span>
+ *   <input class="k-input__control" id="email" aria-describedby="email-hint">
+ * </div>
+ * خطا: aria-invalid="true" روی input — اندازه‌ها: k-input--sm | k-input--lg
+ *
+ * متغیرها: --k-input-height-{sm,md,lg}  --k-input-radius  --k-input-bg  --k-input-border
+ */
+.k-input {
+  --_h: var(--k-input-height-md, calc(2.75rem * var(--k-density)));
+  --_border: var(--k-input-border, var(--k-border-input));
+  --_ring: var(--k-ring-brand);
+
+  display: flex;
+  align-items: center;
+  gap: var(--k-space-2);
+  min-block-size: var(--_h);
+  padding-inline: calc(0.875rem * var(--k-density));
+  border: 1px solid var(--_border);
+  border-radius: var(--k-input-radius, var(--k-radius-md));
+  background: var(--k-input-bg, var(--k-bg-primary));
+  color: var(--k-text-primary);
+  box-shadow: var(--k-shadow-xs);
+  cursor: text;
+  transition:
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-input:focus-within {
+  --_border: var(--k-border-brand);
+  box-shadow: var(--k-shadow-xs), var(--_ring);
+  /* forced-colors */
+  outline: 2px solid transparent;
+}
+
+.k-input:has(.k-input__control[aria-invalid="true"]) {
+  --_border: var(--k-border-error);
+  --_ring: var(--k-ring-error);
+}
+
+.k-input:has(.k-input__control:disabled) {
+  background: var(--k-bg-secondary);
+  border-color: var(--k-border-secondary);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.k-input__control {
+  flex: 1;
+  min-inline-size: 0;
+  align-self: stretch;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--k-text-md);
+}
+.k-input__control::placeholder { color: var(--k-text-tertiary); opacity: 1; }
+.k-input__control:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }
+
+/* ایمیل، آدرس، شماره و رمز همیشه چپ‌به‌راست تایپ می‌شوند */
+.k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [dir="ltr"]) {
+  direction: ltr;
+  text-align: end;
+}
+.k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]):placeholder-shown {
+  direction: rtl;
+  text-align: start;
+}
+[dir="ltr"] .k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]):placeholder-shown {
+  direction: ltr;
+}
+
+.k-input__addon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-md);
+}
+.k-input__addon svg { inline-size: 1.25rem; block-size: 1.25rem; }
+
+/* چندخطی */
+.k-input--textarea { align-items: stretch; padding-block: calc(0.625rem * var(--k-density)); }
+.k-input--textarea .k-input__control { min-block-size: 5lh; resize: vertical; line-height: var(--k-leading-normal); }
+
+.k-input--sm { --_h: var(--k-input-height-sm, calc(2.5rem * var(--k-density))); }
+.k-input--lg { --_h: var(--k-input-height-lg, calc(3rem * var(--k-density))); }
+
+@media (forced-colors: active) {
+  .k-input { border-color: FieldText; }
+  .k-input:focus-within { outline-color: Highlight; }
+}
+
+/* سوییچ — روی <input type="checkbox" role="switch"> بومی
+ * <label class="k-check">
+ *   <input type="checkbox" role="switch" class="k-switch">
+ *   <span class="k-check__text"><span class="k-check__label">اعلان‌ها</span></span>
+ * </label>
+ * در RTL دکمهٔ سوییچ در حالت روشن به چپ می‌رود (خودکار با Logical Properties)
+ * اندازه‌ها: k-switch--sm | k-switch--lg
+ *
+ * متغیرها: --k-switch-width  --k-switch-height  --k-switch-track-on  --k-switch-track-off  --k-switch-thumb
+ */
+.k-switch {
+  --_w: var(--k-switch-width, 2.25rem);
+  --_h: var(--k-switch-height, 1.25rem);
+  --_pad: 2px;
+  --_track: var(--k-switch-track-off, var(--k-border-input));
+
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_w);
+  block-size: var(--_h);
+  margin: 0;
+  padding: var(--_pad);
+  border: 0;
+  border-radius: var(--k-radius-full);
+  background: var(--_track);
+  cursor: pointer;
+  transition:
+    background-color var(--k-duration-normal) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-switch::before {
+  content: "";
+  inline-size: calc(var(--_h) - var(--_pad) * 2);
+  block-size: calc(var(--_h) - var(--_pad) * 2);
+  border-radius: var(--k-radius-full);
+  background: var(--k-switch-thumb, #fff);
+  box-shadow: var(--k-shadow-sm);
+  transition: margin-inline-start var(--k-duration-normal) var(--k-ease-emphasized);
+}
+
+.k-switch:hover { --_track: color-mix(in srgb, var(--k-switch-track-off, var(--k-border-input)), var(--k-text-primary) 12%); }
+
+.k-switch:checked { --_track: var(--k-switch-track-on, var(--k-bg-brand)); }
+.k-switch:checked:hover { --_track: var(--k-switch-track-on, var(--k-bg-brand-hover)); }
+.k-switch:checked::before { margin-inline-start: calc(var(--_w) - var(--_h)); }
+
+.k-switch:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--k-ring-brand);
+}
+
+.k-switch:disabled {
+  --_track: var(--k-bg-tertiary);
+  cursor: not-allowed;
+}
+.k-switch:disabled::before { background: var(--k-bg-secondary); box-shadow: none; }
+
+.k-switch--sm { --_w: var(--k-switch-width, 1.75rem); --_h: var(--k-switch-height, 1rem); }
+.k-switch--lg { --_w: var(--k-switch-width, 2.75rem); --_h: var(--k-switch-height, 1.5rem); }
+
+@media (forced-colors: active) {
+  .k-switch { border: 1px solid ButtonText; background: Canvas; }
+  .k-switch::before { background: ButtonText; forced-color-adjust: none; }
+  .k-switch:checked { background: Highlight; }
+  .k-switch:checked::before { background: HighlightText; }
+}
+
+}